18

我正在尝试将以下两个ng-class三元表达式组合为一个ng-class（因此我可以通过 btn-success/danger 类控制颜色，以及通过 width-small/medium/wide 类控制按钮 div 的宽度

<div class="btn" ng-class="(rate > 0) ? 'btn-success' : 'btn-danger'">{{rate}}</div>
<div class="btn" ng-class="(priority == 'low') ? 'width-small' : (priority == 'medium') ? 'width-medium' : 'width-wide'">{{rate}}</div>

我意识到我可以按照以下方式做一些事情；但是，我想利用 1.1.5 中可用的三元表达式

<div class="btn" ng-class="{'btn-success': rate > 0, 'btn-danger': rate <= 0, 'width-small': priority == 'low', 'width-medium': priority == 'medium', 'width-wide': prioity == 'high'}">{{rate}}</div>

分隔表达式的空格对我不起作用，逗号分隔它们也不起作用ng-class

感谢您在确定是否/如何在单个表达式中包含多个三元表达式方面的帮助ng-class

4

3 回答 3

29

对于任何寻找答案的人：是的，这确实是可能的，正如提到的，可读性是有问题的。

<div ng-class="(conversation.read ? 'read' : 'unread') + ' ' + (conversation.incoming ? 'in' : 'out')"></div>

从 ngClass 文档：

该指令以三种不同的方式运行，具体取决于表达式计算为 > 三种类型中的哪一种：

  1. 如果表达式计算结果为字符串，则该字符串应该是一个或多个以空格分隔的类名。

  2. 如果表达式计算结果为数组，则数组的每个元素 > 应该 > 是一个字符串，它是一个或多个以空格分隔的类名。

  3. 如果表达式计算为一个对象，那么对于具有真值的对象的每个键值对，对应的键被用作类 >name。

选项 1 适用于此。

据我了解，使用这种方法会产生 2 个手表，而使用对象表示法会产生 4 个手表，但我可能在这个上错了。

于 2015-01-29T10:58:26.860 回答
5

我认为您宁愿使用filter。您可以编写一个rateToClass过滤器来保存逻辑并将您的费率转换为您想要的类名。

您也可以在您的范围内放置一个 rateToClass(rate) 函数，但它很难看。

如果您坚持在视图中包含您的逻辑， ng-class请通过使用一个对象来支持多个类（参见官方文档第一个示例，第 7 行）：

<p ng-class="{strike: strike, bold: bold, red: red}">Map Syntax Example</p>

您可以使用更复杂的表达式，例如ng-class='{btn-success: rate > 0}'.

于 2013-10-24T19:39:12.060 回答
4

通过将每个表达式作为该数组的项放入一个数组中，可以在单个 ng-class 指令上添加多个三元表达式。

例子 ：

<div ng-class="[
    expression1 ? 'class1' : 'class2',
    expression2 ? 'class3' : 'class4'
]">
于 2019-07-26T12:17:04.410 回答