有没有办法把ng-class之类的表达式变成条件表达式?

例如,我try 了以下方法:

<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来表示我的意思.

推荐答案

您的第一次try 几乎是正确的,没有引号应该可以工作.

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

这是plnkr美元.

ngClass指令将适用于任何计算truthy或false的表达式,与Javascript表达式有点类似,但有一些不同,您可以阅读大约here个表达式.

作为补充:您还可以使用逻辑运算符来形成如下逻辑表达式

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

Html相关问答推荐

springBoot + Thymeleaf:属性中的UTF-8

Rmarkdown上的垂直标签集

使用固定的HTML代码创建两个可向右滚动的行

网格容器中的定心元件

Font Awesome 6插入符号未显示

是否可以部分列出一个HTML有序列表

如何使用html和css关键帧创建动画

如何在将文本垂直居中的同时将文本右对齐?

在网页上的 Select 器中显示选项时出现问题:未在GO模板中传递循环{{range}}的数据

按钮悬停效果不影响按钮内的图标

并排放置两个 div,同时 div2 环绕 div1

使用 Thymeleaf 将图像水平居中

带有数据 URI 的音频在 Chrome 中失败

如何使用javascript在jsx中重复插入特殊字符?

并排对齐两个文本区域列

如何将背景与之前的内容正确对齐

重点/主动输入的概述问题