使用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)"&nbsp;ng-class="{'class1 class2 class3':!isNew,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'class1 class4': isNew}">{{ isNew }}</div>当isNew = false时， 应用：class1 + class2 + class3应用：isNew = true时，class1 + class4