Angular.js 中的动态类答案

【问题标题】：Dynamic class in Angular.jsAngular.js 中的动态类
【发布时间】：2013-01-16 14:52:51
【问题描述】：

我想动态地将一个 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="..."，因为我的课程会改变一些视觉效果。

【问题讨论】：

标签： class dynamic angularjs

【解决方案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 }"

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

【讨论】：

完美，正是我需要的。谢谢！
更准确地说，ng-class 接受一个对象或一个字符串，所以你可以这样做ng-class=" 'myClass'+item.priority "
我已经在使用你的第二种方法，但后来碰壁了（基本上第二种方法在你有多种/复杂的方法来派生应该放置的类时不是很有用..即东西这需要的不仅仅是简单的 if 语句）.. 所以在方法 1 上 +1
有“其他”选项吗？不想做 { active: user.id == activeId } {inactive: user.id != activeId}...
@geoidesic，这不是真的。原方案ng-class="appliedClass(myObj)"根据myObj状态动态生成类。

【解决方案2】：

如果您只想添加一个类，请使用 class 属性和插值：

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

【讨论】：

我想知道这是否有任何缺点？这感觉不对，但我不知道为什么。
您可能需要ng-class 才能使 IE 或 Edge 正常工作

【解决方案3】：

你几乎明白了 :)
它应该没有插值标记（{{ 和 }}）：

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

【讨论】：

【解决方案4】：

您可以使用三元组动态地执行此操作。

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

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

这将允许多个类。

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

注意：使用三元时不要将对象 {} 放在它周围。你会得到错误。

【讨论】：