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.
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
}
}
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!