使用ng-class的AngularJS切换类

我正在尝试使用ng-class切换元素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'}].

我如何正确地做到这一点？

编辑

解决scheme1 ​​:(过时）

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

编辑2

解决scheme2：

我想更新解决Solution 3 ，因为Stewie提供的解决Solution 3应该是使用的解决Solution 3 。 这对于三元运算符来说是最标准的（对我来说最简单的方法就是读）。 解决的办法是

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

转化为：

if (autoScroll == true) ? //使用'icon-autoscroll' : // else 'icon-autoscroll-disabled'

Answer 1

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

解决scheme1：

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

解决scheme2：

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

解决scheme3（angularv.1.1.4 +引入支持三元运算符）：

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

Plunker

Answer 2

作为替代解决scheme，基于返回最后评估的JavaScript逻辑运算符“&&”，您也可以这样做：

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

这只是稍短一些的语法，但对我来说更容易阅读。

Answer 3

根据条件添加多个class级：

 <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

Answer 4

 data-ng-init="featureClass=false" data-ng-click="featureClass=!featureClass" data-ng-class="{'active': featureClass}" 

模拟toggleClass jQuery。

Answer 5

我是这样做的：

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