This is how you add multiple classes using ng-class:
<div ng-class="{a: first, b: second, c: third}"></div> How can I make the class-name itself (i.e. a or b, or c) the result of an expression, whilst having multiple classes? I want one of the class names to be the value of a property on the scope.
I think that the best solution is to change the ngClass content with a function, such as:
<div ng-class="myFunction()">hola</div> Then define a function that do what it is originally specified in the ngClass attribute:
$scope.myFunction = function () { var x = {}; x['a'] = $scope.first; x['b'] = $scope.second; x[$scope.myClass] = $scope.third; return x; }; In this way, the third class is relative to a variable (the other three variables are for reference to first, second and third).
If you you check this jsfiddle, and you press "add C" and then "switch C with D" how the class are swapped:
