在 ng-class 中结合三元运算符和等式语句
Posted
技术标签:
【中文标题】在 ng-class 中结合三元运算符和等式语句【英文标题】：Combining ternary operator and equality statements in 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': '' )" 【参考方案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'" 显然行不通以上是关于在 ng-class 中结合三元运算符和等式语句的主要内容，如果未能解决你的问题，请参考以下文章