AngularJS ngClass 条件

您的第一次尝试几乎是正确的，它应该在没有引号的情况下工作。

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

这是一个plnkr。

ngClass 指令适用于任何计算为真或假的表达式，有点类似于 Javascript 表达式，但有一些区别，您可以阅读 here。如果您的条件太复杂，那么您可以使用返回真或假的函数，就像您在第三次尝试中所做的那样。

只是为了补充：您还可以使用逻辑运算符来形成逻辑表达式，例如

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 Directive 中提供此功能。您可以在其中放置条件并分配条件类。您可以通过两种不同的方式实现此目的。

类型 1

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

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

如果状态值为 0，则应用第一类

如果状态值为 1，则应用第二类

如果状态值为 2，则应用第三类

类型 2

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

根据状态值将应用于哪个类别

如果 status 值为 1 或 true 那么它将添加类 test_yes

如果状态值为 0 或 false，那么它将添加类 test_no

---

我在上面看到了很好的例子，但它们都以大括号（json map）开头。另一种选择是根据计算返回结果。结果也可以是一个 css 类名列表（不仅仅是 map）。例子：

ng-class="(status=='active') ? 'enabled' : 'disabled'"

或者

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

说明：如果状态为活动，则将使用类 enabled。否则，将使用类 disabled。

列表 [] 用于使用多个类（不仅仅是一个）。

---

有一个简单的方法可以与 html 类属性和简写 if/else 一起使用。没必要把它弄得这么复杂。只需使用以下方法。

<div class="{{expression == true ? 'class_if_expression_true' : 'class_if_expression_false' }}">Your Content</div>

---

我将向您展示两种可以动态应用 ng-class 的方法

步骤1

通过使用三元运算符

<div ng-class="condition?'class1':'class2'"></div>

输出

如果您的条件为真，则 class1 将应用于您的元素，否则将应用 class2。

坏处

当您尝试在运行时更改条件值时，类不会以某种方式更改。因此，如果您有动态类更改等要求，我建议您进行第 2 步。

第2步

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

输出

如果您的条件与 value1 匹配，则 class1 将应用于您的元素，如果与 value2 匹配，则将应用 class2，依此类推。动态的类变化可以很好地处理它。

希望这会帮助你。

---

Angular 语法是使用 : 运算符来执行等效的 if 修饰符

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

将 clearfix 类添加到偶数行。尽管如此，表达式可以是我们在正常 if 条件下可以拥有的任何东西，它应该评估为真或假。

---

当有人必须运行复杂的逻辑来决定合适的 CSS 类时，使用带有 ng-class 的函数是一个不错的选择。

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 ";
  }     
}

---

对于 Angular 2，使用这个

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>

---

用这个

<div ng-class="{states}[condition]"></div>

例如，如果条件为 [2 == 2]，则状态为 {true: '...', false: '...'}

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>

---

ng-class 是核心 AngularJ 的指令。您可以在其中使用“字符串语法”、“数组语法”、“评估表达式”、“三元运算符”和下面描述的更多选项：

ngClass 使用字符串语法

这是使用 ngClass 最简单的方法。您可以只向 ng-class 添加一个 Angular 变量，这就是将用于该元素的类。

<!-- whatever is typed into this input will be used as the class for the div below -->
<input type="text" ng-model="textType">

<!-- the class will be whatever is typed into the input box above -->
<div ng-class="textType">Look! I'm Words!

ngClass Using String Syntax 的演示示例

ngClass 使用数组语法

这类似于字符串语法方法，只是您可以应用多个类。

<!-- both input boxes below will be classes for the div -->
<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">

<!-- this div will take on both classes from above -->
<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass 使用评估表达式

使用 ngClass 的一种更高级的方法（您可能会使用最多的方法）是评估表达式。其工作方式是，如果变量或表达式的计算结果为 true，您可以应用某个类。如果没有，那么该课程将不会被应用。

<!-- input box to toggle a variable to true or false -->
<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?

<!-- add the class 'text-success' if the variable 'awesome' is true -->
<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

ngClass Using Evaluated Expression 的示例

ngClass 使用值

这类似于评估表达式方法，只是您只能将多个值与唯一变量进行比较。

<div ng-class="{value1:'class1', value2:'class2'}[condition]"></div>

ngClass 使用三元运算符

三元运算符允许我们使用速记来指定两个不同的类，一个表示表达式为真，一个表示假。以下是三元运算符的基本语法：

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

评估第一个、最后一个或特定数字

如果您正在使用 ngRepeat 指令并且想要将类应用于 first、last 或列表中的特定数字，则可以使用 ngRepeat 的特殊属性。其中包括 $first、$last、$even、$odd 和其他一些。这是一个如何使用这些的示例。

<!-- add a class to the first item -->
<ul>
  <li ng-class="{ 'text-success': $first }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the last item -->
<ul>
  <li ng-class="{ 'text-danger': $last }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

<!-- add a class to the even items and a different class to the odd items -->
<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

---