Adding multiple class using ng-class

angularjs ng-class

Aditya Sethi · Sep 18, 2013 · Viewed 489k times · Source

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.

Answer

To apply different classes when different expressions evaluate to true:

<div ng-class="{class1 : expression1, class2 : expression2}">
    Hello World!
</div>

To apply multiple classes when an expression holds true:

<!-- notice expression1 used twice -->
<div ng-class="{class1 : expression1, class2 : expression1}">
    Hello World!
</div>

or quite simply:

<div ng-class="{'class1 class2' : expression1}">
    Hello World!
</div>

Notice the single quotes surrounding css classes.