在 ng-class 中组合三元运算符和相等语句

Question

我有一个要素： <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> 都不是似乎工作。请指教

Answer 1

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

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

Answer 2

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}"

Answer 3

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

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

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

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

您的解决方案无效，因为您试图混合使用 2 种不同的语法（有和没有大括号）。

在 ng-class 中组合三元运算符和相等语句

Combining ternary operator and equality statements in ng-class

javascript

ternary-operator

angularjs

ng-class