Как использовать нг-класс связывания еще один класс одному значению

Question

Я хочу, чтобы связать еще один класс до значения, как это:

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

Is ng-class Exists любое использование может связать их в один раз, как это ? (Ниже код не работает)

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

Answer 1

Оказывается, что имя свойства в одинарные кавычки будут непосредственно добавляться к классу, когда значение истинно.

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)" />