Dynamic class in Angular.js
Solution 1
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!
Solution 2
If you just want to add a class, use the class
attribute with interpolation:
class="priority-is-{{todo.priority}}"
Solution 3
You almost got it :)
It should be without interpolation markup ({{
and }}
):
<li ng-repeat="todo in todos" ng-class="todo.priority">
...
![mpaepper](https://i.stack.imgur.com/BMEE3.jpg?s=256&g=1)
mpaepper
Magento certified developer Twitter: twitter.com/mpaepper Blog: paepper.com/blog
Updated on July 25, 2022Comments
-
mpaepper almost 2 years
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 useng-style="..."
since my class will alter several visual things.