Search code examples
angularjsng-class

Adding multiple class using ng-class


ALERT: This thread is for the old AngularJS!

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.

.


Solution

  • 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.