如何根據範圍變量的值更改colores？

Question

我有這樣的元素：

<a class="btn btn-default btn-xs" ui-sref="sites.edit({siteId: site.Id})" ng-click="$event.stopPropagation()"> 
    <i class="glyphicon glyphicon-info-sign"></i> 
</a> 

如果此值：

$scope.IsValid = true; 

我想要的元素是在綠色。

如果此值：

$scope.IsValid = false; 

我想要的元素是在紅色。

如何根據變量值$scope.IsValid變更colres？

Answer 1

您可以使用ng-class分配權類（BTN-綠色，BTN-紅）：

<a class="btn btn-default btn-xs" ng-class="{'btn-green': isValid, 'btn-red': !isValid}" ui-sref="sites.edit({siteId: site.Id})" ng-click="$event.stopPropagation()"> 
    <i class="glyphicon glyphicon-info-sign"></i> 
</a> 

檢查分配存在的類，這僅僅是一個例子。