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

ng-class ist eine Direktive von AngularJs. Sie können "String-Syntax", "Array-Syntax", "Ausgewerteter Ausdruck", "Ternärer Operator" und viele weitere Optionen verwenden, die unten beschrieben sind:

ngClass mit String-Syntax verwenden

Dies ist die einfachste Methode, ngClass zu verwenden. Sie können einfach eine Angular-Variable zu ng-class hinzufügen und das ist die Klasse, die für dieses Element verwendet wird.

Demo-Beispiel für ngClass mit String-Syntax

ngClass mit Array-Syntax verwenden

Dies ähnelt der Methode mit String-Syntax, außer dass Sie mehrere Klassen anwenden können.

ngClass mit ausgewertetem Ausdruck verwenden

Eine fortgeschrittenere Methode zur Verwendung von ngClass (und eine, die Sie wahrscheinlich am häufigsten verwenden werden), besteht darin, einen Ausdruck auszuwerten. So funktioniert das: Wenn eine Variable oder ein Ausdruck als true ausgewertet wird, können Sie eine bestimmte Klasse anwenden. Andernfalls wird die Klasse nicht angewendet.

 Bist du fantastisch?
 Bist du ein Riese?

Beispiel für ngClass mit ausgewertetem Ausdruck

ngClass mit Wert verwenden

Dies ähnelt der Methode mit ausgewertetem Ausdruck, außer dass Sie nur mehrere Werte mit der einzigen Variablen vergleichen können.

ngClass mit dem Ternäroperator verwenden

Der Ternäroperator ermöglicht es uns, mit Kurzschreibweise zwei verschiedene Klassen anzugeben, eine wenn ein Ausdruck wahr ist und eine für falsch. Hier ist die grundlegende Syntax für den Ternäroperator:

ng-class="$variableToEvaluate ? 'class-if-true' : 'class-if-false'">

Erste, letzte oder bestimmte Nummern auswerten

Wenn Sie die ngRepeat-Direktive verwenden und Klassen auf das erste, letzte oder eine bestimmte Nummer in der Liste anwenden möchten, können Sie spezielle Eigenschaften von ngRepeat verwenden. Dazu gehören $first, $last, $even, $odd und einige andere. Hier ist ein Beispiel, wie Sie diese verwenden können.

  {{ item.name }}

  {{ item.name }}

  {{ item.name }}

Answer 5

Verwenden Sie dies

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