CODEWITHSUNDEEP
angularjsng-class
Blaise
Blaise

Reputation: 22212

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.

Upvotes: 6

Views: 4112

Answers (1)

haimlit
haimlit

Reputation: 2582

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.

Upvotes: 8

Related Questions