在 ng-class 中结合三元运算符和等式语句答案

【问题标题】：Combining ternary operator and equality statements in ng-class在 ng-class 中结合三元运算符和等式语句
【发布时间】：2017-09-16 20:35:26
【问题描述】：

我有一个元素： <div ng-class="a ? 'class1' : 'class2'"></div> 我需要向它添加另一个 ng-class 语句ng-class="class3: b !== c"。如何将 ng-class 语句组合在一起。既不是<div ng-class="{a ? 'class1' : 'class2, class3: b !== c"></div> 也不是<div ng-class="(a ? 'class1' : 'class2') + ' ' + (class3: b !== c)"></div> 似乎工作。请指教。

【问题讨论】：

这不是你真正应该使用 ng-class 的方式，但你可以作弊：ng-class="(a ? 'class1' : 'class2') + ' ' + (b ! == c ? 'class3': '' )"

标签： javascript angularjs ternary-operator ng-class

【解决方案1】：

我对 ng-class 的首选语法如下，因为它明确说明了您要添加哪些类，而无需使用三元运算符：

<div ng-class="{'class1' : a, 'class2' : !a, 'class3': b !== c }"></div>

如果你想使用三元，你可以这样做：

<div ng-class="(a ? 'class1' : 'class2') + ' ' + (b !== c ? 'class3': '' )></div>

您的解决方案不起作用，因为您尝试混合使用 2 种不同的语法（带和不带大括号）。

【讨论】：

感谢您快速简洁的回答。你是救生员。

【解决方案2】：

我认为你可以在没有像这样的三元运算符的情况下做到这一点。

<div ng-class="{'class1' : a, 'class2' : !a, 'class3': b !== c }"></div>

【讨论】：

【解决方案3】：

var app = angular.module('exApp', []);

app.controller('ctrl', function($scope){
$scope.a = 1;
$scope.c = 10;
$scope.b = 89;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>
<style>
.class1{
font-size:18px;
}
.class2{
color:orange;
}
.class3{
color:blue;
}
</style>
<body ng-app="exApp" ng-controller="ctrl">
<p ng-class="a ? 'class1' : 'class2'">Hi..Used Ternary Operator</p>
<p ng-class="{'class3': b !== c, 'class1' : !a, 'class2':a, }">Hi!...Without Ternary Operator</p>
</body>

ng-class=" {className1: checkIftrue, className2: otherCondition}"

【讨论】：

感谢您的示例。如果您需要对三元示例进行多次使用，例如违反：node.violation，该怎么办？ ng-class="a ? 'class1' : 'class2, {violations: node.violation}'" 显然行不通