Ich versuche, die Klasse eines Elements mit "ng-class" umzuschalten.
<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.autoScroll
wahr ist, möchte ich, dass ng-class icon-autoscroll
ist und wenn es falsch ist, möchte ich, dass es icon-autoscroll-disabled
ist.
Was ich jetzt habe, funktioniert nicht und erzeugt diesen Fehler in der Konsole
Fehler: Lexer Fehler: Unerwartetes nächstes Zeichen in den Spalten 18-18 [?] in Ausdruck [{(isAutoScroll()) ? 'icon-autoscroll' : 'icon-autoscroll-disabled'}].`
Wie mache ich das richtig?
EDIT
Lösung 1: (veraltet)
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="{'icon-autoscroll': autoScroll, 'icon-autoscroll-disabled': !autoScroll}"></i>
</button>
EDIT 2
Lösung 2:
Ich wollte die Lösung aktualisieren, da "Lösung 3", die von Stewie bereitgestellt wurde, verwendet werden sollte. Sie ist die Standardlösung, wenn es um ternäre Operatoren geht (und für mich am einfachsten zu lesen). Die Lösung würde lauten
<button class="btn" ng-click="autoScroll = !autoScroll">
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
</button>
übersetzt zu:
if (autoScroll == true) ?
//verwendet Klasse 'icon-autoscroll' :
//andernfalls verwendet 'icon-autoscroll-disabled'
Wie verwendet man bedingte in 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 (Angular v.1.1.4+ hat Unterstützung für ternäre Operatoren eingeführt):
<i ng-class="autoScroll ? 'icon-autoscroll' : 'icon-autoscroll-disabled'"></i>
Als alternative Lösung, basierend auf Javascript-Logik-Operator '&&', die die letzte Auswertung zurückgibt, können Sie auch tun dies wie folgt:
<i ng-class="autoScroll && 'icon-autoscroll' || !autoScroll && 'icon-autoscroll-disabled'"></i>
Die Syntax ist nur geringfügig kürzer, aber für mich leichter zu lesen.
Fügen Sie je nach Bedingung mehr als eine Klasse hinzu:
<div ng-click="AbrirPopUp(s)"
ng-class="{'class1 class2 class3':!isNew,
'class1 class4': isNew}">{{ isNew }}</div>
Anwenden: class1 + class2 + class3 when isNew=false,
Anwenden: class1+ class4 wenn isNew=true