使用 ng 类的 AngularJS 切换类

2022-08-30 01:00:55

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

基本上,如果是真的,我希望ng类是,如果它是假的,我希望它是$scope.autoScrollicon-autoscrollicon-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:

我想更新解决方案,因为Stewie提供的解决方案应该是使用的解决方案。当涉及到三元运算符时,它是最标准的(对我来说最容易阅读)。解决方案是Solution 3

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


答案 1

如何在 ng 类中使用条件:

解决方案 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


答案 2

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

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

它只是稍微短一点的语法,但对我来说更容易阅读。