AngularJS ngClass条件
有没有什么办法让像ngClass这样的expression式成为一个条件expression式。 例如，我尝试了以下内容：
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span> 这个代码的问题是，无论obj.value1是什么，类testing总是应用于元素。 这样做：
<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'; }
我只是想知道如果这是ngClass应该如何工作。 我也正在build立一个自定义指令，我想要做类似的事情。 然而，我找不到一种方法来观看expression式（也许这是不可能的，以及它如何工作的原因）。
这里是一个plnkr来展示我的意思：
http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview
你的第一次尝试几乎是正确的，它应该没有引号。
{test: obj.value1 == 'someothervalue'}
这是一个plnkr 。
ngClass指令可以处理任何expression式，用于评估真实性或者错误性，有点类似于Javascriptexpression式，但有一些区别，你可以在这里阅读。 如果你的条件太复杂，那么你可以使用一个返回真实或虚假的函数，就像你在第三次尝试时那样。
只是为了补充：你也可以使用逻辑运算符来形成逻辑expression式
ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
在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中的每个状态，该行使用不同的类。
Angular JS在ng-class指令中提供了这个function。 您可以在其中放置条件并分配条件类。 您可以通过两种不同的方式实现这一点。
types1
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>
在这个代码类将根据状态值的值应用
如果状态值为0，则应用一级
如果状态值是1，则应用第二类
如果状态值是2，则应用三级
types2
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>
地位的价值将在哪一类中适用
如果状态值是1或者真，那么它将添加class test_yes
如果状态值为0或false ，则会添加class test_no
我看到上面的很好的例子，但他们都开始大括号（json地图）。 另一种select是基于计算返回结果。 结果也可以是一个css类名的列表（不只是地图）。 例：
ng-class="(status=='active') ? 'enabled' : 'disabled'"
要么
ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"
说明：如果状态处于活动状态，将使用enabled的类。 否则， disabled的类将被使用。
列表[]用于使用多个类（不只是一个）。
angular度语法是使用：运算符来执行if修饰符的等价物
<div ng-class="{ 'clearfix' : row%2==0 }">
将clearfix类添加到偶数行。 尽pipe如此，expression可能是我们在正常条件下可以得到的任何东西，并且它应该评估为真或假。
我将向您展示两种可以dynamic应用ng-class的方法
步骤1
通过使用三元运算符
<div ng-class="condition?'class1':'class2'"></div>
产量
如果你的条件是真的，那么class1将被应用到你的元素，否则class2将被应用。
坏处
当你试图在运行时改变条件值的时候，这个类不会改变。 所以我会build议你去step2，如果你有像dynamic类更改的要求。
第2步
<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>
产量
如果条件与value1匹配，则class1将应用于元素，如果与value2匹配，则class2将被应用，等等。 而dynamic类更改将正常工作。
希望这会帮助你。
有一个简单的方法，您可以使用HTML类属性和速记if / else。 没有必要使它如此复杂。 只需使用以下方法。
<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>
快乐编码，Nimantha Perera
当有人需要运行复杂的逻辑来决定合适的CSS类时，对ng-class使用函数是一个很好的select。
http://jsfiddle.net/ms403Ly8/2/
HTML：
<div ng-app> <div ng-controller="testCtrl"> <div ng-class="getCSSClass()">Testing ng-class using function</div> </div> </div>
CSS：
.testclass { Background: lightBlue}
JavaScript ：
function testCtrl($scope) { $scope.getCSSClass = function() { return "testclass "; } }
用这个
<div ng-class="{states}[condition]"></div>
例如，如果条件是[2 == 2]，状态是{true：'…'，false：'…'}
