Wie kann ich CSS-Klassen bedingt auf Elemente in AngularJS anwenden?

Bedingte Klassenanwendung mit AngularJS

In AngularJS kann es vorkommen, dass Sie auf der Grundlage bestimmter Bedingungen eine Klasse bedingt auf ein Element anwenden müssen. So können Sie dies effizient erreichen.

Problem:

Betrachten Sie ein Array von Elementen, die als ul mit li-Tags für jedes Element gerendert werden. Sie haben eine selectedIndex-Eigenschaft auf dem Controller und möchten dem li eine Klasse mit dem entsprechenden Index hinzufügen.

Lösung:

1. Verwendung von ng-class:

AngularJS stellt die ng-class-Direktive bereit, mit der Sie Klassen basierend auf Ausdrücken dynamisch anwenden können. Um die Klasse „selected“ bedingt auf die li mit dem selectedIndex anzuwenden, können Sie Folgendes verwenden:

<li ng-class="{selected: $index == selectedIndex}">...</li>

2. Verwenden von ng:class:

(Syntax vor v1)

Für AngularJS-Versionen vor v1 können Sie ng:class mit einem Ausdruck verwenden, der auswertet direkt zu einem Klassennamen. Zum Beispiel:

<li ng:class="{true:'selected', false:''}[$index == selectedIndex]">...</li>

Vergleich der Lösungen:

Während beide Lösungen das gleiche Ergebnis erzielen, unterscheiden sie sich in der Funktionalität:

• ng-class akzeptiert ein Objekt, bei dem Eigenschaftsnamen Klassennamen darstellen und Eigenschaftswerte bestimmen, ob die Klasse angewendet wird. Dies ermöglicht eine komplexere Klassenanwendungslogik.
• ng:class erfordert einen Ausdruck, der einen bestimmten Klassennamen ergibt und weniger flexibel für die bedingte Verarbeitung mehrerer Klassen ist.

Zusätzliche Hinweise:

Sie können diese Technik auch verwenden, um Modelleigenschaften Klassennamen zuzuordnen und so CSS-Klassen fernzuhalten Controller-Code. Zum Beispiel:

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

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