Angular.js中的动态类

一尘不染

Angular.js中的动态类

angularjs

我想将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}"
但是我的变量不是布尔值，而是具有三个值。我该怎么做？另请注意，ng-style="..."由于我的课程会改变一些视觉效果，因此我不想使用。

阅读 161

2020-07-04

共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！

2020-07-04