我想动态添加一个css类到< li>元素我循环。
循环是这样的:
循环是这样的:
<li ng-repeat="todo in todos" ng-class="{{todo.priority}}"> <a href="#/todos/{{todo.id}}">{{todo.title}}</a> <p>{{todo.description}}</p> </li>
在我的todo模型中,我有属性优先级,可以是“紧急”,“不那么重要”或“正常”,我只想为每个元素分配类。
我知道我可以做一个布尔值类似ng-class =“{‘urgent’:todo.urgent}”
但我的变量不是一个布尔,但有三个值。
我该怎么做?
还要注意,我不想使用ng-style =“…”,因为我的类将改变几个视觉的东西。
您可以简单地将一个函数分配为一个表达式,并从那里返回正确的类。
编辑:还有更好的解决方案为动态类。请参见下面的注释。
原文链接:https://www.f2er.com/angularjs/145807.html编辑:还有更好的解决方案为动态类。请参见下面的注释。
摘要视图:
< div ng-class =“appliedClass(myObj)”> …< / div>
并在控制器中:
$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 } }
更好的方式这样做
我最近学到了另一种方法。你传递一个对象,它的属性对应于你操作的类,值是表达式或布尔变量。一个简单的例子:
ng-class =“{active:user.id == activeId}”
在这种情况下,活动类将被添加到元素,只要user.id匹配来自$ scope对象的activeId!