使用ng-class的AngularJS切换类

Question

我试图使用切换一个元素的类 ng-class<button class="btn">  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i></button>isAutoScroll（）：$scope.isAutoScroll = function(){    $scope.autoScroll = ($scope.autoScroll) ? false : true;    return $scope.autoScroll;}基本上，如果$scope.autoScroll为true，则希望ng-class为icon-autoscroll；如果为false，则希望为icon-autoscroll-disabled我现在无法使用，并且在控制台中产生此错误Error: Lexer Error: Unexpected next character  at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].如何正确执行此操作？编辑解决方案1 ：（已过时）<button class="btn" ng-click="autoScroll = !autoScroll">  <i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i></button>编辑2解决方案2：我想更新解决方案Solution 3，因为Stewie提供的应该是使用的一种。对于三元运算符，这是最标准的（对我而言，最容易阅读）。解决方案是<button class="btn" ng-click="autoScroll = !autoScroll">  <i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i></button>转换为：if (autoScroll == true) ?// use类'icon-autoscroll' ://其他用法'icon-autoscroll-disabled'javascript angularjs

Answer 1

如何在ng-class中使用条件：

解决方案1：

<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>

解决方案2：

<i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>

解决方案3（角度v.1.1.4 +引入了对三元运算符的支持）：

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Answer 2

作为替代解决方案，基于返回最后一次求值的javascript逻辑运算符'&&'，您也可以像这样进行操作：

<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>

它只是语法略短，但对我来说更易于阅读。

Answer 3

根据条件添加一个以上的类：

<div ng-click="AbrirPopUp(s)" 

ng-class="{'class1 class2 class3':!isNew, 

           'class1 class4': isNew}">{{ isNew }}</div>

当isNew = false时， 应用：class1 + class2 + class3

应用：isNew = true时，class1 + class4