使用 ng-class 的 AngularJS 切换类

IT技术 javascript angularjs
2021-01-29 11:26:05

我正在尝试使用切换元素的类 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'

6个回答

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

普朗克

@Stewie Faaakin 华丽的伙伴，喜欢它看起来像真正的代码而不是一些混蛋的表达标记：D
2021-03-19 11:26:05
三元正是我一直在寻找的。很好地提供了三个带有版本支持细节的示例。
2021-03-20 11:26:05
第二个例子更简洁，但是你不能把你正在评估的变量放在表达式的前面是荒谬的......它只是读起来很有趣。想象一下将表达式视为 if 语句：“if (variable) true: do this, false: do that... 呃 #fullynerdy
2021-03-22 11:26:05
实际上，首先评估该值非常有用，因为它可以避免意外地为变量分配一个新值。
2021-03-31 11:26:05

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

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

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

根据条件添加多个类：

<div ng-click="AbrirPopUp(s)" 
ng-class="{'class1 class2 class3':!isNew, 
           'class1 class4': isNew}">{{ isNew }}</div>

适用： class1 + class2 + class3 当 isNew =false 时，

适用：当isNew=true时 class1+ class4

<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 函数”。顺便说一句，你需要初始化变量吗？
2021-03-25 11:26:05
你能提供更多关于你的英文答案的信息吗？它与这里已有的答案有何不同？
2021-04-02 11:26:05
我不知道为什么这个答案有很多反对票？？这是对我来说实际上比上面其他人更好的解决方案......
2021-04-08 11:26:05

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

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

通过以下方式根据条件添加多个类：

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>
其它你可能感兴趣的问题
上一篇用“+”替换字符串中的所有空格 下一篇禁用移动浏览器上的悬停效果