小编典典

AngularJS ngClass条件

html

有什么办法可以表达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。


阅读 308

收藏
2020-05-10

共1个答案

小编典典

您的第一次尝试几乎是正确的,它应该没有引号。

{test: obj.value1 == 'someothervalue'}

ngClass指令可与任何评估为真或假的表达式一起使用,这有点类似于Javascript表达式,但有一些区别,您可以在这里阅读。如果条件太复杂,则可以像第三次尝试一样使用返回true或false的函数。

只是为了补充:您还可以使用逻辑运算符来形成逻辑表达式,例如

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
2020-05-10