AngularJS classe la bascule en utilisant ng-class

Question

Je suis en train de basculer de la classe d'un élément à l'aide de 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;
}

En gros, si $scope.autoScroll est vrai, je veux ng-classe icon-autoscroll et si c'est faux, je veux qu'il soit icon-autoscroll-disabled

Ce que j'ai maintenant n'est pas de travail et de la production de cette erreur dans la console

Error: Lexer Error: Unexpected next character at columns 18-18 [?] in expression [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].

Comment puis-je faire correctement?

MODIFIER

solution 1: (obsolète)

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

EDIT 2

solution 2:

Je voulais mettre à jour la solution que la Solution 3 fournis par Stewie, qui doit être utilisé. Il est le plus standard quand il s'agit de opérateur ternaire (et pour moi le plus facile à lire). La solution serait

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

se traduit par:

if (autoScroll == true) ? //utilisation de la classe 'icon-autoscroll' : //sinon utiliser 'icon-autoscroll-disabled'

Answer 1

Comment utiliser le conditionnel dans ng-class:

Solution 1:

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

Solution 2:

 <i ng-class="{true: 'icon-autoscroll', false: 'icon-autoscroll-disabled'}[autoScroll]"></i>
 

Solution 3 (angulaire v.1.1.4 + introduit un support pour l'opérateur ternaire):

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

Plunker

Answer 2

En tant que solution alternative, basée sur l’opérateur logique javascript '&&' qui renvoie la dernière évaluation, vous pouvez également le faire comme ceci:

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

La syntaxe est légèrement plus courte, mais pour moi plus facile à lire.

Answer 3

Ajoutez plusieurs classes en fonction de la condition:

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

Apply: class1 + class2 + class3 lorsque isNew = false ,

Appliquer: class1 + class4 lorsque isNew = true