AngularJS ngClass条件


本文翻译自：AngularJS ngClass conditional

Is there any way to make an expression for something like ng-class to be a conditional? 有什么办法可以使像ng-class这样的表达式成为条件表达式吗？

For example, I have tried the following: 例如，我尝试了以下方法：

1
<span ng-class="{test: 'obj.value1 == \'someothervalue\''}">test</span>

The issue with this code is that no matter what obj.value1 is, the class test is always applied to the element. 此代码的问题在于，无论obj.value1是什么，类测试始终应用于该元素。 Doing this: 这样做：

1
<span ng-class="{test: obj.value2}">test</span>

As long as obj.value2 does not equal a truthy value, the class in not applied. 只要obj.value2不等于真实值，就不会应用该类。 Now I can work around the issue in the first example by doing this: 现在，通过执行以下操作，我可以在第一个示例中解决此问题：

1
<span ng-class="{test: checkValue1()}">test</span>

Where the checkValue1 function looks like this: 其中checkValue1函数如下所示：

1
2
3
$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

I am just wondering if this is how ng-class is supposed to work. 我只是想知道ng-class是否应该工作。 I am also building a custom directive where I would like to do something similar to this. 我还在建立一个自定义指令，在其中我想做类似的事情。 However, I can't find a way to watch an expression (and maybe that is impossible and the reason why it works like this). 但是，我找不到观察表达式的方法（也许这是不可能的，以及它如此工作的原因）。

Here is a plnkr to show what I mean. 这是显示我的意思的plnkr 。

#1楼

参考：https://stackoom.com/question/17MA5/AngularJS-ngClass条件

#2楼

Your first attempt was almost right, It should work without the quotes. 您的第一次尝试几乎是正确的，它应该没有引号。

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

Here is a plnkr . 这是一个plnkr 。

The ngClass directive will work with any expression that evaluates truthy or falsey, a bit similar to Javascript expressions but with some differences, you can read about here . ngClass指令可与任何评估为真或假的表达式一起使用，这有点类似于Javascript表达式，但有一些区别，您可以在这里阅读。 If your conditional is too complex, then you can use a function that returns truthy or falsey, as you did in your third attempt. 如果条件太复杂，则可以像第三次尝试一样使用返回true或false的函数。

Just to complement: You can also use logical operators to form logical expressions like 只是为了补充：您还可以使用逻辑运算符来形成逻辑表达式，例如

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

#3楼

Angular syntax is to use the : operator to perform the equivalent of an if modifier 角语法是使用：运算符执行与if修饰符等效的操作

1
<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Add clearfix class to even rows. 将clearfix类添加到偶数行。 Nonetheless, expression could be anything we can have in normal if condition and it should evaluate to either true or false. 尽管如此，如果条件满足，表达式可以是我们在正常情况下可以拥有的任何东西，并且它的值应该为true或false。

#4楼

Using ng-class inside ng-repeat 在ng-repeat中使用ng-class

1
2
3
4
5
6
7
8
9
10
11
12
<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>

For each status in task.status a different class is used for the row. 对于task.status中的每个状态，该行使用不同的类。

#5楼

Using function with ng-class is a good option when someone has to run complex logic to decide the appropriate CSS class. 当有人必须运行复杂的逻辑来确定适当的CSS类时，将功能与ng-class结合使用是一个不错的选择。

http://jsfiddle.net/ms403Ly8/2/ http://jsfiddle.net/ms403Ly8/2/

HTML: HTML：

1
2
3
4
5
<div ng-app>
  <div ng-controller="testCtrl">
        <div ng-class="getCSSClass()">Testing ng-class using function</div>      
    </div>
</div>

CSS: CSS：

1
.testclass { Background: lightBlue}

JavaScript : JavaScript ：

1
2
3
4
5
function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }    
}

#6楼

Angular JS provide this functionality in ng-class Directive . Angular JS在ng-class Directive中提供了此功能。 In which you can put condition and also assign conditional class. 您可以在其中放置条件，也可以分配条件类。 You can achieve this in two different ways. 您可以通过两种不同的方法来实现。

Type 1 类型1

1
<div ng-class="{0:'one', 1:'two',2:'three'}[status]"></div>

In this code class will be apply according to value of status value 在此代码类中，将根据状态值应用值

if status value is 0 then apply class one 如果状态值为0，则应用类一

if status value is 1 then apply class two 如果状态值是1，那么申请二级

if status value is 2 then apply class three 如果状态值为2，则应用三级

Type 2 2型

1
<div ng-class="{1:'test_yes', 0:'test_no'}[status]"></div>

In which class will be apply by value of status 根据状态值将应用于哪个类别

if status value is 1 or true then it will add class test_yes 如果状态值为1或true ，则将添加类test_yes

if status value is 0 or false then it will add class test_no 如果状态值为0或false ，则将添加类test_no