Dynamic class in Angular.js

Question

I want to dynamically add a css class to an

element I am looping over. The loop is like this:

Answer 1

You can do this dynamically and with a ternary.

ng-class="service.Icon != '' ? service.Icon : 'fas fa-arrow-alt-circle-right'"

The above code will inject the class stored in Icon if it is not null and default to the second if you its not included.

This will allow for multiple classes.

The answer above where you call a function() in databound instances may cause a document consumption loop if anything in the state changes. If you were to put a console write in that, you may find your page is rendered 100 times before it stops looping.

NOTE: Don't put the object {} around it when using ternary. You will get errors.