AngularJS ngClass有条件

Question

有没有办法让像ngClass这样的表达式成为条件.例如,我尝试了以下内容:

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

这段代码的问题在于,无论obj.value1是什么,类测试总是应用于元素.这样做:

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

只要obj.value2不等于truthy值,该类就不应用.现在我可以通过这样做来解决第一个例子中的问题:

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

checkValue1函数如下所示:

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

我只是想知道这是否是ngClass应该如何工作.我也在构建一个自定义指令,我想做类似的事情.但是我找不到观察表达的方法(也许这是不可能的,也就是为什么它会像这样工作).

这是一个显示我的意思的plnkr:

http://plnkr.co/edit/iSh0t8swDEyGbh7ylZg2?p=preview

Answer 1

你的第一次尝试几乎是正确的,它应该没有引号.

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

这是一个plnkr.

ngClass指令将适用于任何计算truthy或falsey的表达式,有点类似于Javascript表达式但有一些差异,你可以在这里阅读.如果你的条件过于复杂,那么你可以使用一个返回真或假的函数,就像你在第三次尝试时那样.

只是为了补充:你也可以使用逻辑运算符来形成逻辑表达式

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

Answer 2

在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中的每个状态,该行使用不同的类.

Answer 3

Angular JS在ng-class Directive中提供此功能.您可以在其中放置条件并分配条件类.您可以通过两种不同的方式实现此目的.

输入1

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

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

如果状态值为0然后应用类一个

如果状态值为1然后应用类2

如果状态值为2,则应用第3类

类型2

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

在哪个类中将按状态值应用

如果状态值为1或true,则它将添加类test_yes

如果状态值为0或false,则它将添加类test_no

Answer 4

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

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

要么

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

说明:如果状态为活动状态,enabled则将使用该类.否则,disabled将使用该类.

该列表[]用于使用多个类(不只是一个).

Answer 5

有一个简单的方法,您可以使用html类属性和速记if/else.不需要让它如此复杂.只需使用以下方法.

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

快乐的编码,Nimantha Perera

Answer 6

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

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

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

Answer 7

我将向您展示两种可以动态应用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,依此类推.动态类更改可以正常使用它.

希望这会帮助你.

Answer 8

当有人必须运行复杂的逻辑来决定适当的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 ";
  }     
}

Answer 9

用这个

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

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

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

Answer 10

对于Angular 2,请使用此选项

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

Answer 11

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

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

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示例

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>