Assigning css class dynamically using angular js

Recently I had this requirement that the pages of an admin panel should be dynamically segregated based on the type of user logged in. I managed to implement it, but had difficulty in setting appropriate styles, like font awesome icons. I searched Google but didn't find the answer what I was looking for.
 FYI I am using angular js and wanted to do solve this in angular js only. So I found ng-class directive.
To assign class based on a condition just use ng-class directive like below.
ng-class ="yourCondition?'ClassTrue':'ClassFalse'

An example is given below




<li ng-class="pageType=='cart'?'fa fa-shopping-cart':'fa fa-barcode'"></li>

This can also be done using class attribute like below




<li class="{{pageType=='cart'?'fa fa-shopping-cart':'fa fa-barcode'}}"></li>


That's it. Simple isn't it?

Comments