AngularJS przełącza klasę za pomocą ng-class

Próbuję przełączać klasę elementu za pomocą 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;
}

Zasadniczo, jeśli $scope.autoScrolljest to prawdą, chcę, aby klasa ng była, icon-autoscrolla jeśli jest fałszywa, chcę, aby byłaicon-autoscroll-disabled

To, co mam teraz, nie działa i powoduje ten błąd w konsoli

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

Jak poprawnie to zrobić?

EDYTOWAĆ

rozwiązanie 1: (nieaktualne)

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

EDYCJA 2

rozwiązanie 2:

Chciałem zaktualizować rozwiązanie, ponieważ Solution 3dostarczone przez Stewie powinno być tym, którego użyłem. Jest to najbardziej standardowy jeśli chodzi o operatora trójskładnikowego (i dla mnie najłatwiejszy do odczytania). Rozwiązaniem byłoby

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

przetłumaczyć na:

if (autoScroll == true) ?// użyj klasy 'icon-autoscroll' :// else use'icon-autoscroll-disabled'

Jak używać warunkowej w klasie ng:

Rozwiązanie 1:

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

Rozwiązanie 2:

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

Rozwiązanie 3 (Angular v.1.1.4 + wprowadził obsługę operatora trójskładnikowego):

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

Plunker

Jako alternatywne rozwiązanie oparte na operatorze logiki javascript „&&”, który zwraca ostatnią ocenę, możesz również zrobić to tak:

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

To tylko nieco krótsza składnia, ale dla mnie łatwiejsza do odczytania.

Dodaj więcej niż jedną klasę na podstawie warunku:

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

Zastosuj: klasa 1 + klasa 2 + klasa 3, gdy isNew = false ,

Zastosuj: klasa 1 + klasa 4, gdy 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>

Analogicznie do toggleClassmetody jQuery , jest to sposób na włączenie active/ wyłączenie klasy po kliknięciu elementu.

automatyczne przewijanie zostanie zdefiniowane i zmodyfikowane w kontrolerze.

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

Dodaj wiele klas na podstawie warunku przez:

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

Zrobiłem to w ten sposób:

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

// w twoim kontrolerze

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