如何使用納克級的結合多了一個班一個值

Question

我想多一個類綁定到一個值，就像這樣：

ng-class="{first: isTrue, second: isTrue, third: isTrue}" 

是ng-class已存在的任何使用可以結合他們一次，這樣？ （下面的代碼不起作用）

ng-class="{[first, second, third]: isTrue}" 

Answer 1

事實證明，當值爲true時，單引號中的屬性名將直接添加到類中。

ng-class="{'first second third': isTrue}" 

工程。

Answer 2

你需要了解的ng-class指令什麼是你傳遞的價值實際上是評估大致就好像它是真正的JavaScript。 （我相信它實際上使用$scope.$eval。）這意味着您可以調用$scope上可用的函數來生成類哈希對象。我非常喜歡你提出的解決方案，將你需要的課程拿出來分開，但是如果你有一個你想要應用到這個元素的動態類列表呢？由於語法大致爲 JavaScript，因此您無法通過執行{list.join(' '): isTrue}（因爲這在JavaScript中無效）來構建對象。但是，你可以做的是寫一個函數，並把它添加到這是否範圍：

angular.module('app') 
    .controller('MyCtrl', function($scope) { 
    $scope.myList = ['first', 'second', 'third']; 

    $scope.allOrNoneClasses = function(list, condition) { 
     var o = {}; 
     if (condition) { 
     o[list.join(' ')] = true; 
     } 
     return o; 
    }; 
    $scope.scopeBasedClasses = function(list) { 
     var o = {}; 
     list.forEach(function(class){ 
     // this applies a class which matches the scope attribute if 
     // the attribute evaluates to a truthy value. 
     o[class] = $scope.$eval(class); 
     }); 
     return o; 
    }; 
    }); 

這可能然後在HTML中使用如下：

<div ng-class="allOrNoneClasses(myList, isTrue)" />