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

Ihr erster Versuch war fast richtig, es sollte ohne Anführungszeichen funktionieren.

{test: obj.value1 == 'someothervalue'}

Hier ist ein plnkr.

Die ngClass-Direktive funktioniert mit jedem Ausdruck, der wahr oder falsch ausgewertet wird, ähnlich wie Javascript-Ausdrücke, aber mit einigen Unterschieden. Mehr dazu können Sie hier nachlesen. Wenn Ihre Bedingung zu komplex ist, können Sie eine Funktion verwenden, die wahr oder falsch zurückgibt, wie Sie es in Ihrem dritten Versuch gemacht haben.

Nur zur Ergänzung: Sie können auch logische Operatoren verwenden, um logische Ausdrücke zu bilden, wie zum Beispiel

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

Answer 2

Mit ng-class innerhalb von ng-repeat verwenden

                {{$index + 1}}
                {{task.name}}
                {{task.date|date:'yyyy-MM-dd'}}
                {{task.status}}

Für jeden Status in task.status wird eine andere Klasse für die Zeile verwendet.

Answer 3

Angular JS bietet diese Funktionalität in der ng-class Directive. In der Sie Bedingungen festlegen und auch bedingte Klassen zuweisen können. Sie können dies auf zwei verschiedene Arten erreichen.

Typ 1

In diesem Code wird die Klasse je nach Wert des Status angewendet.

Wenn der Wert des Status 0 ist, wird die Klasse one angewendet.

Wenn der Wert des Status 1 ist, wird die Klasse two angewendet.

Wenn der Wert des Status 2 ist, wird die Klasse three angewendet.

---

Typ 2

Bei diesem Typ wird die Klasse je nach Wert des Status angewendet.

Wenn der Wert des Status 1 oder true ist, wird die Klasse test_yes hinzugefügt.

Wenn der Wert des Status 0 oder false ist, wird die Klasse test_no hinzugefügt.

Answer 4

Ich sehe großartige Beispiele oben, aber sie alle beginnen mit geschweiften Klammern (JSON-Map). Eine andere Option ist das Zurückgeben eines Ergebnisses basierend auf Berechnungen. Das Ergebnis kann auch eine Liste von CSS-Klassennamen sein (nicht nur eine Map). Beispiel:

ng-class="(status=='active') ? 'enabled' : 'disabled'"

oder

ng-class="(status=='active') ? ['enabled'] : ['disabled', 'alik']"

Erklärung: Wenn der Status aktiv ist, wird die Klasse enabled verwendet. Andernfalls wird die Klasse disabled verwendet.

Die Liste [] wird verwendet, um mehrere Klassen zu verwenden (nicht nur eine).

Answer 5

Es gibt eine einfache Methode, die Sie mit dem HTML-Klassenattribut und der Kurzform von if/else verwenden könnten. Es ist nicht notwendig, es so komplex zu machen. Verwenden Sie einfach die folgende Methode.

Ihr Inhalt