Multiple ng-class in angular JS

The ng-class directive is used every time you need to dynamically apply a class to an element by providing the name of the class in a data-binding expression. We can add multiple classes based on the multiple conditions in angular JS.

Here is the example demonstrating adding multiple ng-class directive:

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

Add class using ternary operator:

   <div ng-class="expression?'className1':'className2'"> ... </div>

For example, if you want to add active class to your menu when menu button is clicked & toggle class when menu button is clicked again then refer example below.

   <div ng-class="menuActive?'active':''"> ... </div>

In above case, menuActive is a scope variable & it is toggled when menu button is clicked. When menuActive is clicked active class is added to the menu & when it is clicked again active class is removed. It is very similar to JQuery addClass & removeClass methods.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>