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或更多以空格分隔的类名。



如果表达式求值为数组，则数组＆gt;的每个元素都应该是一个字符串，该字符串是一个或多个以空格分隔的类名。



如果表达式求值为一个对象，则对于每个键值对＆gt;具有truthy值的对象，相应的键将用作类＆gt;名称。

选项1适用于此处。

根据我的理解，使用此方法将导致2个手表，而使用对象表示法将导致4，但我可能在这个上错了。

Answer 2

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

你也可以在你的范围内设置rateToClass（rate）函数，但这很难看。

如果您坚持在视图中使用逻辑， ng-class通过使用对象支持多个类（请参阅official doc first example，第7行）：

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

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

Answer 3

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

示例：

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

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

3 个答案: