Wie kann ich Klassen in AngularJS bedingt anwenden?

Elegante Lösungen für die bedingte Anwendung von Klassen in AngularJS

Bei der Anzeige eines Arrays von Elementen müssen Sie möglicherweise ein bestimmtes Element hervorheben auf einem Grundstück. In AngularJS kann diese bedingte Anwendung von Klassen auf verschiedene Arten erreicht werden.

Eine einfache, wenn auch nicht ideale Lösung besteht darin, das Listenelement (li) manuell zu duplizieren und der ausgewählten Klasse eine Klasse hinzuzufügen Index. AngularJS bietet jedoch ausgefeiltere Methoden, um diese Aufgabe zu erfüllen.

Ausdrucksbasierte Klassenzuweisung

Sie können eine Klasse direkt mit dem selectedIndex-Index zur li hinzufügen Verwenden Sie einen bedingten Ausdruck innerhalb der ng-class-Direktive:

ng:class="{true:'selected', false:''}[$index==selectedIndex]"

Dieser Ausdruck ergibt entweder „ausgewählt“, wenn der aktuelle Index mit dem übereinstimmt selectedIndex oder andernfalls eine leere Zeichenfolge.

Objektbasierte Klassenzuordnung

Mit einer neueren Syntax können Sie Klassen basierend auf einem Ausdruck zuweisen, der ein Objekt zurückgibt:

ng-class="{selected: $index==selectedIndex}"

In diesem Fall wird die Eigenschaft „ausgewählt“ als Klasse angewendet, wenn der aktuelle Index mit der übereinstimmt selectedIndex.

Zuordnung von Eigenschaften zu Klassennamen

Für einen flexibleren Ansatz können Sie eine Modelleigenschaft direkt einem Klassennamen zuordnen:

ng-class="{admin:'enabled', moderator:'disabled', '':'hidden'}[user.role]"

Dieser Ausdruck verwendet die Eigenschaft user.role, um zu bestimmen, welche Klasse angewendet werden soll. Wenn die Rolle des Benutzers beispielsweise „admin“ ist, wird die Klasse „enabled“ dem Element hinzugefügt.

Das obige ist der detaillierte Inhalt vonWie kann ich Klassen in AngularJS bedingt anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!