Angular.js中的dynamic类
我想dynamic地添加一个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>
在我的待办模型中，我有属性的优先级，可以是“紧急”，“不太重要”或“正常”，我只是想为每个元素分配类。
我知道我可以用ng-class="{'urgent': todo.urgent}"一个布尔types的操作ng-class="{'urgent': todo.urgent}"但是我的variables不是一个布尔值，而是有三个值。 我将如何做到这一点？ 还要注意，我不想使用ng-style="..."因为我的类会改变几个可视化的东西。
您可以简单地将一个函数指定为一个expression式，并从那里返回适当的类。 编辑：也有更好的dynamic类的解决scheme。 请参阅下面的注释。
从视图片段：
<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 } }
更好的方式来做到这一点
我最近了解到另一种方法。 你传入一个对象，该对象的属性对应于你所操作的类，这些值是expression式或布尔variables。 一个简单的例子：
ng-class="{ active: user.id == activeId }"
在这种情况下，只要user.id与$scope对象中的activeId相匹配， active类就会被添加到元素中！
如果您只想添加一个类，请使用具有插值的class属性：
class="priority-is-{{todo.priority}}"
你差不多了:)
它应该没有插值标记（ {{和}} ）：
<li ng-repeat="todo in todos" ng-class="todo.priority"> ...
