是否有可能在元素的ng-class中有多个单独的三元表达式？

Question

我试图将以下两个ng-class三元表达式合并为一个ng-class(所以我可以控制颜色,通过btn-success/danger类,以及宽度,通过width-small/medium/wide class,我的按钮divs

<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

Answer 1

对于任何寻找答案的人:是的,这确实是可能的,同样提到的可读性是值得怀疑的.

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

从ngClass文档:

该指令以三种不同的方式运行,具体取决于表达式评估的三种类型中的哪一种:

1. 如果表达式求值为字符串,则该字符串应为一个或多个以空格分隔的类名.

2. 如果表达式求值为数组,则数组>的每个元素应该是一个字符串,该字符串是一个或多个以空格分隔的类名.

3. 如果表达式求值为一个对象,则对于具有truthy值的对象的每个键值对,相应的键将用作类> name.

选项1适用于此处.

从我的理解使用这种方法将导致2手表,而使用对象符号将导致4,但我可能在这一个错误.

Answer 2

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

例子 ：

<div ng-class="[
    expression1 ? 'class1' : 'class2',
    expression2 ? 'class3' : 'class4'
]">

Answer 3

我想你宁愿使用过滤器.您可以编写一个rateToClass过滤器来保存逻辑并在您想要的类名中转换您的速率.

你也可以在你的范围内放一个rateToClass(rate)函数,但它很难看.

如果您坚持在视图中ng-class使用逻辑, 请使用对象支持多个类(请参阅官方doc第一个示例,第7行):

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

你可以拥有更复杂的表达,比如ng-class='{btn-success: rate > 0}'.