使用 ng-class 的 AngularJS 切换类

Posted 2023-02-22

【中文标题】使用 ng-class 的 AngularJS 切换类

【英文标题】：AngularJS toggle class using ng-class

【发布时间】：2013-03-02 02:13:13

【问题描述】：

我正在尝试使用 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'

【问题讨论】：

can't use conditionals in angular expressions per docs => 无控制流语句：您不能在角度表达式中执行以下任何操作：条件、循环或抛出.使用另一个函数或指令

@Ronnie 我看到了你的解决方案，太酷了。但我想知道为什么这里的autoScroll 只会在每个按钮中起作用？ （我用多个按钮对此进行了测试，效果也很好）我的意思是，当我单击每个按钮时，它只会影响那个按钮，而不是所有按钮。

【参考方案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

【讨论】：

第二个例子更简洁，但是你不能把你正在评估的变量放在表达式的前面是荒谬的......它读起来很有趣。想象一下将表达式视为 if 语句：“if (variable) true: do this, false: do that... ugh #fullynerdy

@Stewie Faaakin 漂亮的伙伴，喜欢它看起来像真正的代码，而不是一些混蛋表达标记：D

实际上首先评估值非常有用，因为它可以避免意外地为变量分配新值。

三元正是我想要的。很好地提供了三个带有版本支持详细信息的示例。

【参考方案2】：

作为替代解决方案，基于返回最后评估的 javascript 逻辑运算符 '&&'，您也可以这样做：

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

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

【参考方案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

【参考方案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 类的方法。

【讨论】：

您能否提供更多关于您的英文答案的信息？它与已有的答案有何不同？

我不知道为什么这个答案有很多反对票？？这是对我来说实际上比上面其他人更好的解决方案......

我认为描述写得不好，人们对“jQuery”这个词的反应。描述的意思是“这类似于 JQuery 中的 toggleClass 函数”。顺便说一句，你需要初始化变量吗？

【参考方案5】：

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

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

根据条件添加多个类：

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

【参考方案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');

【讨论】：

虽然这确实有效，但您正在混合使用 Angular 和 jQuery。如果可以的话，你应该尽量避免这种情况。最初询问的内容可以在没有点击事件的情况下完成。如果您有另一个按钮应该在上面的按钮上切换此类怎么办？它现在不会更新，因为您是在点击时更改它而不是通过 ng-class

来自 jqLit​​e。更多docs.angularjs.org/api/ng/function/angular.element

我明白了。我的意思是你不需要使用 jQuery 来获得原始问题的答案。