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

基本上，if $scope。autoScroll为true，我希望ng-class为icon-autoscroll，如果为false，我希望它为icon-autoscroll-disabled

我现在没有工作，并在控制台中产生这个错误

错误:Lexer错误:在列18-18中意外的下一个字符[?[{(isAutoScroll())) ?]'icon-autoscroll': 'icon-autoscroll-disabled'}]。

我该怎么做呢?

EDIT

解决方案1:(过时)

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

编辑2

解决方案2:

我希望将解决方案更新为应该使用的解决方案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': //否则使用'icon-autoscroll-disabled'

如何在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>

砰砰作响

2013-03-13 22:05:47

作为替代解决方案，基于javascript逻辑运算符'&&'，它返回最后的求值，你也可以这样做:

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

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

2013-04-26 21:20:34

根据条件添加多个类:

<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

2014-06-12 19:54:15

<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方法，这是一种在元素被单击时切换激活类的方法。

2015-12-28 09:22:20

我是这样做的:

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

2016-08-11 06:58:01

Autoscroll将在控制器中定义和修改:

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

根据条件添加多个类:

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

2018-09-11 12:58:38

AngularJS使用ng-class切换类

推荐文章

最新文章

标签