AngularJS - 在 ng-class 上使用多个 Coniditons答案

【问题标题】：AngularJS - Using Multiple Coniditons on ng-classAngularJS - 在 ng-class 上使用多个 Coniditons
【发布时间】：2014-10-24 08:31:22
【问题描述】：

我有一个使用 ng-repeat。也有一个正在工作的 ng-class true/false 条件。我可以在我的真/假语句中添加另一个条件吗？

<tr ng-repeat="data in myData" ng-class="{true: 'green', false: 'red'}[data.IsPositive]">
    <td>
        {{data.Name}}
    </td>
    <td>
        {{data.CompanyName}}
    </td>
    <td>
        <span ng-show="data.Date | lessThanOneYear">Less than one year</span>
        <span ng-show="data.Date | lessThanOneYear">Greater than one year</span>
    </td>
</tr>

基本上，我想检查一下是否：

ng-class="[data.IsPositive] and [data.Date | lessThanOneYear]

所以，如果以上两个都为真，则应用 CSS 类绿色...如果为假，应用红色。

解决方案：

我不得不混合使用提供的 2 条建议。本质上，带有过滤器的条件需要用 () 包裹，所以：

ng-class="[data.IsPositive && (data.Date | lessThanOneYear)]

【问题讨论】：

重复？ stackoverflow.com/questions/18871277/…
@MarioLevrero 我不这么认为。他询问了一个更复杂的布尔表达式。他不是在询问在 ng-class 表达式中使用更多类。
@BiAiB，绝对正确。我的错。

标签： angularjs angularjs-scope ng-class ng-show angular-ng-if

【解决方案1】：

通过这样做，您需要了解[] 之间的表达式必须计算为您在关联数组{true: 'green', false: 'red'} 中指定的索引之一。

然后可以使用任何计算结果为真或假的表达式，在这种情况下是任何布尔表达式。

[data.IsPositive and data.Date | lessThanOneYear]

【讨论】：

在上面添加了解决方案。
应该是：{true: 'green', false: 'red'}[data.IsPositive and data.Date | lessThanOneYear]

【解决方案2】：

是的，您可以：

{true: 'green', false: 'red'}[data.IsPositive && secondCondition && x>3 && whatever]

【讨论】：

在上面添加了解决方案。