Angular.js中的动态类

时间:2013-02-01 10:05:58

标签: class dynamic 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>

在我的todo模型中,我的属性优先级可以是“紧急”,“不那么重要”或“正常”,我只想为每个元素分配类。

我知道我可以用类似ng-class="{'urgent': todo.urgent}"之类的布尔值来做这个 但我的变量不是布尔值,而是有三个值。 我该怎么做? 另请注意,我不想使用ng-style="...",因为我的课程会改变几个视觉效果。

4 个答案:

答案 0 :(得分:85)

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

来自视图的片段:

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

在这种情况下,只要activeuser.id对象中的activeId匹配,$scope类就会添加到该元素中。

答案 1 :(得分:43)

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

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

答案 2 :(得分:9)

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

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

答案 3 :(得分:0)

您可以动态地进行三元操作。

ng-class="service.Icon != '' ? service.Icon : 'fas fa-arrow-alt-circle-right'"

上面的代码将注入存储在Icon中的类(如果它不为null),如果不包含则默认为第二个。

这将允许多个课程。

如果状态发生任何变化,则在数据绑定实例中调用function()的上述答案可能会导致文档使用循环。如果您要在其中写入控制台,您可能会发现页面在停止循环之前已呈现100次。

注意:使用三进制时,请勿将对象{}放在其周围。您会得到错误。