AngularJS bascule la classe en utilisant la classe ng

J'essaie de basculer la classe d'un élément en utilisant 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;
}

Fondamentalement, si $scope.autoScrollc'est vrai, je veux que ng-class soit icon-autoscrollet si c'est faux, je veux que ce soiticon-autoscroll-disabled

Ce que j'ai maintenant ne fonctionne pas et génère cette erreur dans la console

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

Comment dois-je procéder correctement?

ÉDITER

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 car Solution 3, fournie par Stewie, devrait être celle utilisée. C'est le plus standard en ce qui concerne l'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) ?// utilise la classe 'icon-autoscroll' :// sinon utilise'icon-autoscroll-disabled'

Comment utiliser le conditionnel dans la classe ng:

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 + prise en charge introduite pour l'opérateur ternaire):

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

Plunker

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

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

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

Ajoutez plusieurs classes en fonction de la condition:

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

Appliquer: classe1 + classe2 + classe3 lorsque isNew = false ,

Appliquer: classe1 + classe4 lorsque isNew = true

<div data-ng-init="featureClass=false" 
     data-ng-click="featureClass=!featureClass" 
     data-ng-class="{'active': featureClass}">
    Click me to toggle my class!
</div>

Analogue à la toggleClassméthode de jQuery , c'est un moyen d'activer active/ désactiver la classe lorsque l'utilisateur clique sur l'élément.

le défilement automatique sera défini et modifié dans le contrôleur.

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

Ajoutez plusieurs classes en fonction de la condition en:

<span ng-class= "autoscroll?'first second third':'classes_if_false'"></span>

J'ai fait ce travail de cette façon:

<button class="btn" ng-click='toggleClass($event)'>button one</button>
<button class="btn" ng-click='toggleClass($event)' >button two</button>

// dans votre contrôleur

 $scope.toggleClass = function (event){
        $(event.target).toggleClass('active');
    }