AngularJS使用ng-class切换类

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) ?//使用class 'icon-autoscroll' :// else use'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(角度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 ,

当isNew = true时,应用:class1 + class4

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在单击元素时打开/关闭类的方法.