Add multiple classes with ng-class, where one of the classes is conditional

angularjs ng-class
Jukke picture Jukke · Apr 17, 2014 · Viewed 16.7k times · Source

I got this code: 

ng-class="{selectedHeader: key == selectedCol}"

It works but I would like too add the 'key' value as a class too, Ive tried:

ng-class="[{selectedHeader: key == selectedCol}, key]"

But that wont work, does anyone know how to solve this?

Answer

Michal Charemza picture Michal Charemza · Apr 17, 2014

If you always want key to be added as a class:

ng-class="{selectedHeader: key == selectedCol, key: true]"

or you can just put it into a class attribute with {{}} interpolation.

ng-class="{selectedHeader: key == selectedCol}" class="{{key}}"

Just for completeness, if you only want to include it if it's equal to selectedCol:

ng-class="{selectedHeader: key == selectedCol, key: key == selectedCol}"

Related questions

AngularJS ng-class if-else expression

With AngularJS I'm using ng-class the following way: <div class="bigIcon" data-ng-click="PickUp()" ng-class="{first:'classA', second:'classB', third:'classC', fourth:'classC'}[call.State]"/> I'm wondering if I can use the if-else expression to do something similar to …

Read More
Adding multiple class using ng-class

Can we have multiple expression to add multiple ng-class ? for eg. <div ng-class="{class1: expressionData1, class2: expressionData2}"></div> If yes can anyone put up the example to do so. .

Read More
adding and removing classes in angularJs using ng-click

I am trying to work how to add a class with ngClick. I have uploaded up my code onto plunker Click here. Looking at the angular documentation i can't figure out the exact way it should be done. Below is …

Read More