Menu
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.
999
You can use both class and ngClass as the first one gives you the opportunity to apply a class that you want to implement in all cases under any circumstances and the later to apply classes conditionally.
Now you have learned the basics of Angular directives, including how to use ngIf, ngFor, ngClass, ngStyle, ngModel, and ngSwitch. You can combine them to create more complex user interfaces.
So far we've looked at adding just single classes, which is something the NgClass directive can also help us with as it supports multiple classes. Using multiple classes is the real reason to use the NgClass directive. You can think of NgClass as being able to specify multiple [class. class-name] on the same element.
ngClass is more powerful. It allows you to bind a string of classes, an array of strings, or an object like in your example.
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.
78
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
