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

我首选的ng-class语法如下，因为它明确指出你要添加哪些类，而不使用三元运算符：

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

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

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

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

Answer 2

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

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

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

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

3 个答案: