AngularJS-Umschaltklasse mit ng-Klasse

Ich versuche, die Klasse eines Elements mit umzuschalten 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;
}

Grundsätzlich, wenn $scope.autoScrolles wahr ist, möchte ich, dass ng-class ist, icon-autoscrollund wenn es falsch ist, möchte ich, dass es so isticon-autoscroll-disabled

Was ich jetzt habe, funktioniert nicht und erzeugt diesen Fehler in der Konsole

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

Wie mache ich das richtig?

BEARBEITEN

Lösung 1: (veraltet)

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

BEARBEITEN 2

Lösung 2:

Ich wollte die Lösung aktualisieren, da Solution 3sie von Stewie bereitgestellt werden sollte. Es ist der Standard, wenn es um ternäre Operatoren geht (und für mich am einfachsten zu lesen). Die Lösung wäre

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

wird übersetzt in:

if (autoScroll == true) ?// benutze Klasse 'icon-autoscroll' :// sonst benutze'icon-autoscroll-disabled'

Verwendung der Bedingung in der ng-Klasse:

Lösung 1:

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

Lösung 2:

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

Lösung 3 (Winkel v.1.1.4 + Einführung der Unterstützung für den ternären Operator):

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

Plunker

Als alternative Lösung, basierend auf dem Javascript-Logikoperator '&&', der die letzte Auswertung zurückgibt, können Sie dies auch folgendermaßen tun:

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

Es ist nur eine etwas kürzere Syntax, aber für mich leichter zu lesen.

Fügen Sie basierend auf der Bedingung mehr als eine Klasse hinzu:

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

Anwenden: Klasse1 + Klasse2 + Klasse3, wenn isNew = false ,

Übernehmen: class1 + class4 wenn 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>

Analog zur toggleClassMethode von jQuery können Sie auf diese Weise die activeKlasse ein- und ausschalten, wenn Sie auf das Element klicken.

Autoscroll wird in der Steuerung definiert und geändert.

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

Fügen Sie mehrere Klassen basierend auf der Bedingung hinzu, indem Sie:

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

Ich habe diese Arbeit folgendermaßen gemacht:

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

// in deinem Controller

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