AngularJS ngClass bedingungsgemäß

Question

Gibt es einen Weg, einen Ausdruck für so etwas wie ng-class zu machen, der bedingt ist?

Zum Beispiel habe ich Folgendes versucht:

test

Das Problem bei diesem Code ist, dass unabhängig von dem Wert von obj.value1 die Klasse test immer auf das Element angewendet wird. Wenn man Folgendes tut:

test

Wird die Klasse nur angewendet, wenn obj.value2 nicht einem wahren Wert entspricht. Ich kann das Problem im ersten Beispiel umgehen, indem ich Folgendes mache:

test

Wo die Funktion checkValue1 wie folgt aussieht:

$scope.checkValue1 = function() {
  return $scope.obj.value === 'somevalue';
}

Ich frage mich nur, ob das so ist, wie ng-class funktionieren soll. Ich baue auch eine benutzerdefinierte Direktive, bei der ich etwas Ähnliches machen möchte. Ich kann jedoch keinen Weg finden, einen Ausdruck zu überwachen (und vielleicht ist das unmöglich und der Grund, warum es so funktioniert).

Hier ist ein plnkr, um zu zeigen, was ich meine.

Answer 1

Ich werde Ihnen zwei Methoden zeigen, wie Sie ng-class dynamisch anwenden können

Schritt-1

Verwendung des ternären Operators

Ausgabe

Wenn Ihre Bedingung wahr ist, wird class1 auf Ihr Element angewendet, sonst wird class2 angewendet.

Nachteil

Wenn Sie versuchen, den bedingten Wert zur Laufzeit zu ändern, wird die Klasse irgendwie nicht geändert. Daher empfehle ich Ihnen, Schritt 2 zu befolgen, wenn Sie Anforderungen wie die dynamische Klassenänderung haben.

Schritt-2

Ausgabe

Wenn Ihre Bedingung mit value1 übereinstimmt, wird class1 auf Ihr Element angewendet, wenn sie mit value2 übereinstimmt, wird class2 angewendet usw. Und die dynamische Klassenänderung funktioniert damit einwandfrei.

Ich hoffe, das wird Ihnen helfen.

Answer 2

Die Angular-Syntax besteht darin, den :-Operator zu verwenden, um das Äquivalent eines if-Modifiers auszuführen.

Füge der Geraden Zeilen die clearfix-Klasse hinzu. Dennoch kann der Ausdruck alles sein, was wir in einer normalen if-Bedingung haben können, und er sollte entweder true oder false auswerten.

Answer 3

Mit der Verwendung von Funktionen mit ng-class ist eine gute Option, wenn jemand komplexe Logik ausführen muss, um die geeignete CSS-Klasse zu bestimmen.

http://jsfiddle.net/ms403Ly8/2/

HTML:

        Testing ng-class using function       

CSS:

.testclass { Background: lightBlue}

JavaScript:

function testCtrl($scope) {
    $scope.getCSSClass = function() {
     return "testclass ";
  }     
}

Answer 4

Verwenden Sie dies

zum Beispiel wenn die Bedingung [2 == 2] lautet, sind die Zustände {true: '...', false: '...'}

Answer 5

Für Angular 2 verwenden Sie dies

Inhalt