AngularJS attiva / disattiva la classe usando ng-class

Sto cercando di attivare / disattivare la classe di un elemento 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;
}

Fondamentalmente, se $scope.autoScrollè vero, voglio che ng-class sia icon-autoscrolle se è falso, voglio che siaicon-autoscroll-disabled

Quello che ho ora non funziona e sta producendo questo errore nella console

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

Come posso farlo correttamente?

MODIFICARE

soluzione 1: (obsoleto)

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

MODIFICA 2

soluzione 2:

Volevo aggiornare la soluzione come Solution 3, fornita da Stewie, dovrebbe essere quella utilizzata. È il più standard quando si tratta di operatore ternario (e per me più facile da leggere). La soluzione sarebbe

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

si traduce in:

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

Come usare il condizionale in ng-class:

Soluzione 1:

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

Soluzione 2:

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

Soluzione 3 (angolare v.1.1.4 + supporto introdotto per operatore ternario):

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

Plunker

Come soluzione alternativa, basata sull'operatore di logica javascript '&&' che restituisce l'ultima valutazione, è anche possibile farlo in questo modo:

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

È solo una sintassi leggermente più breve, ma per me più facile da leggere.

Aggiungi più di una classe in base alla condizione:

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

Applica: class1 + class2 + class3 quando isNew = false ,

Applica: class1 + class4 quando 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>

Analogamente al toggleClassmetodo di jQuery , questo è un modo per attivare active/ disattivare la classe quando si fa clic sull'elemento.

lo scorrimento automatico verrà definito e modificato nel controller.

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

Aggiungi più classi in base alla condizione di:

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

Ho fatto questo lavoro in questo modo:

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

// nel tuo controller

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