Search code examples
angularjsng-class

mix use of regular class and ng-class

Want to generate different icons in an ng-repeat:

<i class="fa fa-pencil"></i>
<i class="fa fa-briefcase"></i>
...

How can I specify only one of the classes using ng-class?

If I wrote:

<i class="fa" ng-class="{{t.icon}}"></i>

Then the generated output is

<i class="fa" ng-class="fa-pencil"></i>
<i class="fa" ng-class="fa-briefcase"></i>

and of course the icon does not show on page.

Solution

  • Don't use angular expression. This works:

    <i class="fa" ng-class="t.icon"></i>

    (See plunker with example on the p tag: http://plnkr.co/edit/AUN81QF0COtYMeedBygJ?p=preview )

    You can put various inputs in ngClass, you can see them in:

    https://docs.angularjs.org/api/ng/directive/ngClass

    The arguments section has a brief description about them.