有没有办法让像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来说明我的意思。
发布于 2013-05-14 03:44:18
您的第一次尝试几乎是正确的,它应该没有引号的工作。
{test: obj.value1 == 'someothervalue'}这是一个plnkr。
ngClass指令可以处理任何求值为truthy或falsey的表达式,有点类似于Javascript表达式,但有一些不同,您可以阅读有关here的内容。如果您的条件太复杂,那么您可以使用返回truthy或falsey的函数,就像您在第三次尝试中所做的那样。
作为补充:您还可以使用逻辑运算符来形成逻辑表达式,例如
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"发布于 2014-07-29 07:46:34
在ng-repeat中使用ng-class
<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中的每个状态,行使用不同的类。
发布于 2015-07-08 17:11:03
Angular JS在中提供了此功能。其中您可以放置条件,也可以分配条件类。您可以通过两种不同的方式来实现此目的。
类型1
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>在此代码中,类将根据状态值应用
如果status值为,则应用one类
如果状态值为1,则应用类two
如果status值为2,则应用three类
类型2
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>将通过status值应用哪个类
如果status的值是1或true,则它将添加类test_yes
如果status值为0或false,则会添加类test_no
https://stackoverflow.com/questions/16529825
复制相似问题