Wie kann ich bedingte Ausdrücke mit AngularJS ngClass verwenden?

Bedingte Ausdrücke in AngularJS ngClass

Mit der AngularJS ngClass-Direktive können Sie CSS-Klassen basierend auf booleschen Ausdrücken bedingt auf HTML-Elemente anwenden. Um einen Ausdruck bedingt zu machen, können Sie die folgende Syntax verwenden:

ng-class="{test: condition}"

Wobei Bedingung ein JavaScript-Ausdruck ist, der als wahr oder falsch ausgewertet wird.

Beispiel:

Angenommen, Sie haben ein Objekt obj mit einem Eigenschaftswert1, der auf „someothervalue“ gesetzt ist. Sie können die CSS-Klasse „test“ bedingt auf ein Element anwenden, indem Sie den folgenden ngClass-Ausdruck verwenden:

<span ng-class="{test: obj.value1 == 'someothervalue'}">test</span>

Wenn obj.value1 gleich „someothervalue“ ist, wird die Klasse „test“ auf das Element angewendet .

Wahrheits- und Falschausdrücke:

Die ngClass-Direktive wertet Ausdrücke aus als „wahre“ oder „falsche“ Werte. Ein wahrer Wert (z. B. „wahr“, „1“, „ja“) wendet die Klasse an, während ein falscher Wert (z. B. „falsch“, „0“, „nein“) die Klasse nicht anwendet.

Komplexe Ausdrücke:

Wenn Ihre bedingte Logik zu komplex wird, können Sie eine Funktion verwenden, die ein wahrheitsgemäßes Oder zurückgibt falscher Wert.

Beispiel:

<span ng-class="{test: checkValue1()}">test</span>

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

Logische Ausdrücke:

Sie können auch logische Operatoren verwenden, um logische zu bilden Ausdrücke in ngClass.

Beispiel:

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"

Dieser Ausdruck wendet die Klasse „test“ an, wenn entweder obj.value1 gleich „someothervalue“ oder obj.value2 gleich ist gleich „etwas anderes“.

Das obige ist der detaillierte Inhalt vonWie kann ich bedingte Ausdrücke mit AngularJS ngClass verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!