AngularJS ngClass条件

有没有办法让ng-class这样的表达式成为一个条件？

例如，我曾试过以下的方法。

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

我只是想知道ng-class是否应该这样工作。 我也在建立一个自定义指令，我想做与此类似的事情。然而，我找不到观察表达式的方法（也许这是不可能的，也是它这样工作的原因）。

这里有一个plnkr来显示我的意思。

daaawx
已编辑的问题 29日 三月 2019 в 7:18
编程
html css angularjs
13日 五月 2013 в 7:38
27 种观点
对该问题的评论 (5)
解决办法

你的第一次尝试几乎是正确的，没有引号也应该可以。

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

这里有一个plnkr。

ngClass指令将与任何评价为truthy或falsey的表达式一起工作，这与Javascript表达式有点类似，但有一些不同，你可以阅读这里。 如果你的条件太复杂，那么你可以使用一个返回truthy或falsey的函数，就像你在第三次尝试时那样。

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

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
评论(5)

在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中的每一个状态，都有一个不同的类被用于该行。

JakeGould
编辑本段答案5日 四月 2016 в 2:52
评论(2)

Angular JS在[ng-class Directive][1]中提供了这个功能。 在其中，你可以放置条件，也可以分配条件类。 你可以通过两种不同的方式来实现这个功能。

第1种

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

在这段代码中，该类将根据status值的值进行应用

如果status值为0，则应用类一。

如果status值为1，则应用two类。

如果status值为2，则应用类三。

第二类

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

根据status的值将适用于哪个类

如果status值为1或true，则会添加类test_yes。

如果status值为0或false，则会添加类test_no。

[1]: https://docs.angularjs.org/api/ng/directive/ngClass

Kaushal Khamar
编辑本段答案7日 四月 2016 в 1:10
评论(5)

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

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

或

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

解释：如果状态为激活，将使用 "启用 "类。 如果状态为激活，将使用 "enabled "类。 否则，将使用disabled类。

列表"[]"用于使用多个类(而不仅仅是一个)。

AlikElzin-kilaka
编辑本段答案10日 十二月 2015 в 11:37
评论(3)

有一个简单的方法，你可以用html类属性和速记if/else。 不需要做得那么复杂。 只要使用下面的方法就可以了。

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

快乐的编码。 Nimantha Perera

评论(2)

Angular的语法是使用:操作符来执行相当于if修改器的操作。

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

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

Tristan
编辑本段答案13日 八月 2018 в 9:03
评论(1)

我将向你展示两种方法，通过它们你可以动态地应用ng-class。

步骤1

通过使用三元运算符

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

产量

如果您的条件为真，那么class1将被应用到您的元素上，否则class2将被应用。

缺点

当你在运行时尝试改变条件值时，类不知为何不会改变。 所以，如果你有动态类改变的需求，我建议你走第二步。

第二步

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

产量

如果你的条件与value1匹配，那么class1将被应用到你的元素上，如果与value2匹配，那么class2将被应用，以此类推。 而动态类的改变也可以用它来实现。

希望对你有所帮助。

Subhransu
编辑本段答案22日 四月 2016 в 10:42
评论(1)

当有人需要运行复杂的逻辑来决定合适的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 ";
  }     
}
评论(2)

用这个

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

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

<div ng-class="{true: 'ClassA', false: 'ClassB'}[condition]"></div>
Saeed.Ataee
编辑本段答案21日 五月 2018 в 10:53
评论(3)

对于Angular 2，使用这个

<div [ngClass]="{'active': dashboardComponent.selected_menu == 'mapview'}">Content</div>
评论(1)

ng-class是AngularJs核心的一个Directive，其中你可以使用"String Syntax""Array Syntax""Evaluated Expression"""。 其中你可以使用"字符串语法", "数组语法", "评估表达式", " 三元运算符"。 以及下面描述的更多选项。

ngClass使用字符串语法

这是最简单的使用ngClass的方法。 你只需将一个Angular变量添加到 ng-class，这就是该元素将使用的类。


<input type="text" ng-model="textType">


<div ng-class="textType">Look! I'm Words!

ngClass使用字符串语法][1]的演示例。

ngClass使用阵列语法

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


<input type="text" ng-model="styleOne">
<input type="text" ng-model="styleTwo">


<div ng-class="[styleOne, styleTwo]">Look! I'm Words!

ngClass使用评价表达式。

使用ngClass的一个更高级的方法（也是你可能会用得最多的方法）是评估一个表达式。 它的工作原理是，如果一个变量或表达式的值为true，你就可以应用某个类。 如果不是，那么这个类就不会被应用。


<input type="checkbox" ng-model="awesome"> Are You Awesome?
<input type="checkbox" ng-model="giant"> Are You a Giant?


<div ng-class="{ 'text-success': awesome, 'text-large': giant }">

ngClass使用评价表达式][2]的例子。

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以及其他一些属性。 下面是一个使用这些属性的例子。


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


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


<ul>
  <li ng-class="{ 'text-info': $even, 'text-danger': $odd }" ng-repeat="item in items">{{ item.name }}</li>
</ul>

[1]: https://codepen.io/anon/pen/OeWKNE [2]: https://codepen.io/anon/pen/BgpXdG

评论(0)