Angular.js中的动态类

发布时间：2020-12-17 08:40:44 所属栏目：安全来源：网络整理

导读：我想动态添加一个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模型中，我有属性优先级，可以是“紧急”，“不

我想动态添加一个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 =“…”，因为我的类将改变几个视觉的东西。

您可以简单地将一个函数分配为一个表达式，并从那里返回正确的类。
编辑：还有更好的解决方案为动态类。请参见下面的注释。

摘要视图：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!