AngularJS ngClass bedingte

Gibt es eine Möglichkeit, einen Ausdruck für etwas wie ng-class zu einer Bedingung zu machen?

Ich habe zum Beispiel das Folgende versucht:

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

Das Problem bei diesem Code ist, dass der Klassentest immer auf das Element angewandt wird, egal was obj.value1 ist. Dies zu tun:

<span ng-class="{test: obj.value2}">test</span>

Solange obj.value2 nicht gleich einem wahren Wert ist, wird die Klasse nicht angewendet. Jetzt kann ich das Problem im ersten Beispiel umgehen, indem ich dies tue:

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

Wobei die Funktion checkValue1 wie folgt aussieht:

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

Ich frage mich nur, ob die Funktion ng-class so funktionieren soll. Ich bin auch dabei, eine benutzerdefinierte Richtlinie zu erstellen, in der ich etwas Ähnliches wie das hier tun möchte. Ich kann jedoch keine Möglichkeit finden, einen Ausdruck zu beobachten (und vielleicht ist das unmöglich und der Grund, warum es so funktioniert).

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

daaawx
Bearbeitete Frage 29. März 2019 в 7:18
Programmierung
html css angularjs
13. Mai 2013 в 7:38
13 Aufrufe
Lösung

Ihr erster Versuch war fast richtig. Es sollte ohne die 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 bei Javascript-Ausdrücken, aber mit einigen Unterschieden, die Sie hier nachlesen können. Wenn Ihre Bedingung zu komplex ist, können Sie eine Funktion verwenden, die den Wert truthy oder falsey zurückgibt, wie Sie es in Ihrem dritten Versuch getan haben.

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

ng-class="{'test': obj.value1 == 'someothervalue' || obj.value2 == 'somethingelse'}"
Bertrand
Bearbeitete Antwort 2. Juli 2015 в 1:17
Kommentare (5)

Verwendung von ng-class innerhalb von ng-repeat

<table>
    <tbody>
            <tr ng-repeat="task in todos"
                ng-class="{'warning': task.status == 'Hold' , 'success': task.status == 'Completed',
              'active': task.status == 'Started', 'danger': task.status == 'Pending' } ">
                <td>{{$index + 1}}</td>
                <td>{{task.name}}</td>
                <td>{{task.date|date:'yyyy-MM-dd'}}</td>
                <td>{{task.status}}</td>
            </tr>
    </tbody>
</table>

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

JakeGould
Bearbeitete Antwort 5. April 2016 в 2:52
Kommentare (2)

Die Angular-Syntax verwendet den :-Operator, um das Äquivalent eines if-Modifikators auszuführen

<div ng-class="{ 'clearfix' : (row % 2) == 0 }">

Die Klasse clearfix zu geraden Zeilen hinzufügen. Nichtsdestotrotz kann der Ausdruck alles sein, was wir in einer normalen if-Bedingung haben können, und er sollte entweder true oder false ergeben.

Tristan
Bearbeitete Antwort 13. August 2018 в 9:03
Kommentare (1)