1. 首页
  2. 问题
  3. 一个元素是否可以在ng-class中具有多个单独的三元表达式？
一尘不染

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

angularjs

我正在尝试将以下两个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


阅读 307

收藏
2020-07-04

共1个答案

一尘不染

对于任何寻求答案的人：是的，这确实是可能的，而且如上所述，可读性令人怀疑。

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

从ngClass文档中：

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

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

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

  3. 如果表达式的计算结果是对象，则对于具有真实值的对象的每个键值对，将对应的键用作类>名称。

选项1在这里适用。

根据我的理解，使用此方法将导致2次监视，而使用对象表示法将导致4次监视，但是我对此可能是错的。

2020-07-04