how to combine conditional class and data bound class in angularjs

Question

To apply different classes when different expressions evaluate to true:

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

To apply different classes a data-bound class using []

 <div ng-class="[class3, class4]">
        Hello World!
    </div>

I want to know if it is possible to combine the two types of template, i.e; have a conditional class using {} and a data-bound class using []?

Any help would be greatly appreciated.

Thanks in advance.

Answer 1

You can use following syntax

<div ng-class="[condition1 && 'class1', condition2 && 'class2', className]">
    Hello World!
</div>

className is a variable in scope. It's value gets applied to div.

Here is a example fiddle Conditionally apply class in angularjs