Difficulty adding multiple classes wit ng-class

Question

I'm trying to add two classes to this div using ng-class, but even though checkForActive is returning true, it's being ignored and only class_{{$index}} is getting added.

If I remove class_{{$index}} altogether, active is added correctly.

Is there an obvious mistake in my syntax here?

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

Answer 1

You could just provide true value to the key class_{{$index}} just to that property gets added as a class name to the class list of the element. It is just the way you do active: checkForActive.

i.e

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

But i believe there could be some undesired behavior due the usage of interpolation ({{) within the ng-class directive (Atleast used to happen with older versions). So you could as well use an array.

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

The above method will add a class name false if active or disabled is false, which should be harmless.

Or pass index to a controller function say getStatus($index) and return the object from there and use it in the ng-Class directive.

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

and

 ng-class="getClass()"

@Okazari pointed out that it indeed works by mixing class with ng-class so you could also do:

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