CODEWITHSUNDEEP
classdynamicangularjs
mpaepper
mpaepper

Reputation: 4022

Dynamic class in Angular.js

I want to dynamically add a css class to an <li> element I am looping over. The loop is like this:

<li ng-repeat="todo in todos" ng-class="{{todo.priority}}">
  <a href="#/todos/{{todo.id}}">{{todo.title}}</a>
  <p>{{todo.description}}</p>
</li>

In my todo model, I have the property priority which can be "urgent", "not-so-important" or "normal" and I just want to assign the class for each element.

I know I can do this for a boolean with something like ng-class="{'urgent': todo.urgent}" But my variable is not a boolean, but has three values. How would I do this? Note also that I do not want to use ng-style="..." since my class will alter several visual things.

Upvotes: 54

Views: 89924

Answers (4)

Mike Mason
Mike Mason

Reputation: 3

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.

Upvotes: 0

Gilbert
Gilbert

Reputation: 3722

If you just want to add a class, use the class attribute with interpolation:

class="priority-is-{{todo.priority}}"

Upvotes: 44

vucalur
vucalur

Reputation: 6087

You almost got it :)
It should be without interpolation markup ({{ and }}):

<li ng-repeat="todo in todos" ng-class="todo.priority">
...

Upvotes: 10

ŁukaszBachman
ŁukaszBachman

Reputation: 33735

You can simply assign a function as an expression and return proper class from there. Edit: there is also better solution for dynamic classes. Please see note below.

Snippet from view:

<div ng-class="appliedClass(myObj)">...</div>

and in the controller:

$scope.appliedClass = function(myObj) {
    if (myObj.someValue === "highPriority") {
        return "special-css-class";
    } else {
        return "default-class"; // Or even "", which won't add any additional classes to the element
    }
}

Better way of doing this

I've recently learned about another approach. You pass in an object which has properties corresponding to the classes you operate on, and the values are expressions or boolean variables. A simple example:

ng-class="{ active: user.id == activeId }"

In this case active class will be added to the element as long as user.id matches activeId from the $scope object!

Upvotes: 94

Related Questions