小编典典

使用 ng-class 的 AngularJS 切换类

all

我正在尝试使用来切换元素的类ng-class

<button class="btn">
  <i ng-class="{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}"></i>
</button>

是自动滚动():

$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'


阅读 57

收藏
2022-06-15

共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>

普朗克

2022-06-15