添加多個班級的困難類

Question

我試圖用ng-class添加兩個班級到這個div，但即使checkForActive返回true，它被忽略，只有class_{{$index}}被添加。

如果我一起刪除class_{{$index}}，則會正確添加active。

在我的語法中是否有明顯的錯誤？

<div "ng-class="{active: checkForActive, disabled: checkForDisable, class_{{$index}}} "></div> 

Answer 1

你可以只提供true價值的關鍵class_{{$index}}只是到該屬性被添加爲一個類名的元素的類列表。這只是你的方式active: checkForActive。

即

{active: checkForActive, disabled: checkForDisable, class_{{$index}} :true} 

，但我相信有可能是由於在NG-類指令內插值（{{）的使用一些不希望的行爲（ATLEAST使用與舊版本的情況發生）。所以你可以使用一個數組。

ng-class="[checkForActive && 'active' , checkForDisable && 'disabled', 'class_' + $index]" 

上述方法將添加一個類名稱false如果啓用或停用的是假的，這應該是無害的。

或將索引傳遞給控制器​​函數，如getStatus($index)，並從那裏返回對象並在ng-Class指令中使用它。

$scope.getClass = function(){ 
    var obj = {active: $scope.checkForActive, disabled: $scope.checkForDisable}; 
    obj['class_' + this.$index] = true; 
    return obj; 
} 

和

ng-class="getClass()" 

@Okazari指出，這確實是通過混合class與ng-class工作所以你也可以這樣做：

class="class_{{$index}}" ng-class="{active: checkForActive, disabled: checkForDisable}"