Angular.js中的动态类

Question

我想动态地将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="..."因为我的课程会改变几个视觉事物.

Answer 1

您可以简单地将一个函数指定为表达式并从那里返回适当的类. 编辑:动态类也有更好的解决方案.请参阅下面的说明.

来自视图的片段:

<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 }"

在这种情况下active,只要来自对象的user.id匹配activeId,类就会被添加到元素中$scope!

Answer 2

如果您只想添加一个类,请使用class带插值的属性:

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

Answer 3

你几乎得到它:)
它应该没有插值标记({{和}}):

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