使用 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 为真，我希望ng-class 为icon-autoscroll，如果为假，我希望它为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) ? //使用类'icon-autoscroll' : //否则使用'icon-autoscroll-disabled'

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（angular v.1.1.4+ 引入了对三元运算符的支持）：

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

Plunker

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，

应用：class1+class4 when isNew=true

Answer 4

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

类似于 jQuery 的 toggleClass 方法，这是一种在单击元素时打开/关闭 active 类的方法。

Answer 5

autoscroll 将在控制器中定义和修改：

<span ng-class= "autoscroll?'class_if_true':'class_if_false'"></span>

根据条件添加多个类：

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

Answer 6

我以这种方式完成了这项工作：

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)'>button two</button>

在您的控制器中：

$scope.toggleClass = function (event) {
    $(event.target).toggleClass('active');
}