AngularJS使用纳克级切换类 [英] AngularJS toggle class using ng-class

问题描述

我试图切换使用类纳克级

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

isAutoScroll（）：

isAutoScroll():

$scope.isAutoScroll = function()
{
    $scope.autoScroll = ($scope.autoScroll) ? false : true;
    return $scope.autoScroll;
}

基本上，如果 $ scope.autoScroll 是真的，我想纳克级为图标自动滚屏和如果假的，我想这是图标自动滚屏禁用

Basically, if $scope.autoScroll is true, I want ng-class to be icon-autoscroll and if its false, I want it to be icon-autoscroll-disabled

我现在已经不能正常工作，并在控制台产生这个错误

What I have now isn't working and is producing this error in the console

错误：词法错误：[？]在列意外的下一个字符在18-18前pression [{（isAutoScroll（））？ 图标，自动滚屏'：'图标，自动滚屏禁用'}]

我如何正确地做到这一点？

How do I correctly do this?

修改

解决方案1：（过时）

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

编辑2

解决方案2：

我想通过更新提供的Stewie应该是所使用的解决方案作为解决方案3。这是最标准的，当涉及到三元操作符（对我最容易读）。该解决方案将是

I wanted to update the solution as Solution 3 provided by Stewie should be the one used. It is the most standard when it comes to ternary operator (and to me easiest to read). The solution would be

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

语句：

如果（自动滚动== true）而 //使用类图标，自动滚屏： //别的使用图标，自动滚屏禁用

if (autoScroll == true) ? //use class 'icon-autoscroll' : //else use 'icon-autoscroll-disabled'

推荐答案

如何纳克级使用条件：

解决方案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 +引入了三元运营商支持）：

Solution 3 (angular v.1.1.4+ introduced support for ternary operator):

<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>

Plunker

这篇关于AngularJS使用纳克级切换类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！