Search code examples
javascriptangularjsng-class

Applying multiple CSS class names of different natures using ng-class in AngularJS

I have a directive whose structure is:

<mydir ng-class="i.labels", ng-class="{'elSelected': i.id == selectedId}"></mydir>

Here i.labels is a an array of CSS class names and i.id and selectedId are numbers, all of which are declared inside the controller. I want to apply all the classes contained in the array i.labels and conditionally apply elSelected to mydir. How can I do this with ng-class?

Solution

  • You can use ng-class to apply array of classes and use class attribute to apply a class conditionally:

    <mydir ng-class="i.labels" 
class="{{i.id == selectedId? 'elSelected' : ''}}"></mydir>

    Fiddle