首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >AngularJS ngClass conditional

AngularJS ngClass conditional
EN

Stack Overflow用户
提问于 2013-05-14 03:38:38
回答 11查看 926.7K关注 0票数 526

有没有办法让像ng-class这样的东西的表达式成为条件表达式?

例如,我尝试了以下几种方法:

代码语言:javascript
运行
复制
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

这段代码的问题在于,无论obj.value1是什么,类测试总是应用于元素。执行此操作:

代码语言:javascript
运行
复制
<span ng-class="{test: obj.value2}">test</span>

只要obj.value2不等于真值,该类就不会被应用。现在我可以通过执行以下操作来解决第一个示例中的问题:

代码语言:javascript
运行
复制
<span ng-class="{test: checkValue1()}">test</span>

其中,checkValue1函数如下所示:

代码语言:javascript
运行
复制
$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

我只是想知道这是不是ng-class的工作原理。我还在构建一个自定义指令,其中我想要做一些类似的事情。然而,我找不到一种方法来观察一个表达式(也许这是不可能的,这也是为什么它会这样工作的原因)。

这里有一个plnkr来说明我的意思。

EN

回答 11

Stack Overflow用户

回答已采纳

发布于 2013-05-14 03:44:18

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

代码语言:javascript
运行
复制
{test: obj.value1 == 'someothervalue'}

这是一个plnkr

ngClass指令可以处理任何求值为truthy或falsey的表达式,有点类似于Javascript表达式,但有一些不同,您可以阅读有关here的内容。如果您的条件太复杂,那么您可以使用返回truthy或falsey的函数,就像您在第三次尝试中所做的那样。

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

代码语言:javascript
运行
复制
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
票数 618
EN

Stack Overflow用户

发布于 2014-07-29 07:46:34

在ng-repeat中使用ng-class

代码语言:javascript
运行
复制
<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

对于task.status中的每个状态,行使用不同的类。

票数 233
EN

Stack Overflow用户

发布于 2015-07-08 17:11:03

Angular JS在中提供了此功能。其中您可以放置条件,也可以分配条件类。您可以通过两种不同的方式来实现此目的。

类型1

代码语言:javascript
运行
复制
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

在此代码中,类将根据状态值应用

如果status值为,则应用one

如果状态值为1,则应用类two

如果status值为2,则应用three

类型2

代码语言:javascript
运行
复制
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

将通过status值应用哪个类

如果status的值是1或true,则它将添加类test_yes

如果status值为0或false,则会添加类test_no

票数 116
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16529825

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档