具有条件 css 的 ng-repeat 值

【问题标题】：ng-repeat values with conditional css具有条件 css 的 ng-repeat 值
【发布时间】：2014-05-07 21:42:35
【问题描述】：

我们有一个 json 数据源来填充一个 html 页面就好了。 ng-style, ng-switch 不要似乎解决了我们的问题。我们需要基于 css 样式有条件地应用关于 ng-repeat 的返回值。例如，当从 {{mem.name}} 是“受限制的”，我们需要背景显示为黄色，文本显示为黑色。当 {{mem.name}} 的值为“关闭”时，我们需要背景显示为红色，文本显示为白色。这必须基于返回值而不是基于任何用户交互。提前感谢您提供的任何指导。

【问题讨论】：

标签： css angularjs

【解决方案1】：

尝试将以下内容添加到重复元素 HTML：

ng-class="{{mem.name == 'restricted' && 'restrictedClass' || mem.name == 'closed' && 'closedClass'}}"

然后在你的 CSS 中

.restrictedClass{
 background:yellow;
 color:black;
}
.closedClass{
 background:red;
 white;
}

【讨论】：

你为什么不用ng-class？
@Julien - 在这种情况下，您实际上可以直接使用类或 ng-class，尽管我同意，应该使用 ng-class。
ng-class 的更好用法是：ng-class="{'restrictedClass':mem.name == 'restricted', 'closedClass':mem.name == 'closed'}"