AngularJS ngClass有条件

Question

AngularJS ngClass有条件

是否有任何方法可以表达类似ng-class条件的东西？

例如，我尝试了以下内容：

<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

这段代码的问题在于，无论是什么obj.value1，类测试总是应用于元素。这样做：

<span ng-class="{test: obj.value2}">test</span>

只要obj.value2不等于真值，该类就不适用。现在我可以通过这样做来解决第一个例子中的问题：

<span ng-class="{test: checkValue1()}">test</span>

当checkValue1函数如下：

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';}

我只是想知道这ng-class是否应该如何工作。我也在构建一个自定义指令，我想做类似的事情。但是，我找不到一种观察表达的方法（也许这是不可能的，也就是它的工作原理）。

这是一个展示我的意思的plnkr。

Answer 1

你的第一次尝试几乎是正确的，它应该没有引号。{test: obj.value1 == 'someothervalue'}这是一个plnkr。ngClass指令将适用于任何计算truthy或falsey的表达式，有点类似于Javascript表达式但有一些差异，你可以在这里阅读。如果你的条件过于复杂，那么你可以使用一个返回真或假的函数，就像你在第三次尝试时那样。只是为了补充：你也可以使用逻辑运算符来形成逻辑表达式ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Answer 2

Angular JS在ng-class Directive中提供此功能。您可以在其中放置条件并分配条件类。您可以通过两种不同的方式实现此目的。输入1<div&nbsp;ng-class="{0:'one',&nbsp;1:'two',2:'three'}[status]"></div>在此代码类中将根据状态值的值应用如果状态值为0然后应用类一个如果状态值为1然后应用类2如果状态值为2，则应用第3类类型2<div&nbsp;ng-class="{1:'test_yes',&nbsp;0:'test_no'}[status]"></div>在哪个类中将按状态值应用如果状态值为1或true，则它将添加类test_yes如果状态值为0或false，则它将添加类test_no