Comment puis-je appliquer conditionnellement des classes dans AngularJS ?

Solutions élégantes pour l'application conditionnelle de classes dans AngularJS

Lors de l'affichage d'un tableau d'éléments, vous pouvez rencontrer le besoin de mettre en évidence un élément spécifique en fonction sur une propriété. Dans AngularJS, cette application conditionnelle des classes peut être réalisée de plusieurs manières.

Une solution simple, bien que non idéale, consiste à dupliquer manuellement l'élément de liste (li) et à ajouter une classe à celle correspondant à l'élément sélectionné. indice. Cependant, AngularJS fournit des méthodes plus sophistiquées pour réaliser cette tâche.

Affectation de classe basée sur l'expression

Pour ajouter directement une classe au li avec l'index selectedIndex, vous pouvez utilisez une expression conditionnelle dans la directive ng-class :

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

Cette expression est évaluée comme « sélectionné » si le courant index correspond à l'index sélectionné, ou à une chaîne vide dans le cas contraire.

Mappage de classes basé sur un objet

Une syntaxe plus récente vous permet d'attribuer des classes en fonction d'une expression qui renvoie un objet :

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

Dans ce cas, la propriété 'selected' sera appliquée en tant que classe si l'index actuel correspond au selectedIndex.

Mappage de nom de propriété à classe

Pour une approche plus flexible, vous pouvez mapper une propriété de modèle directement à un nom de classe :

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

Cette expression utilise la propriété user.role pour déterminer quelle classe appliquer. Par exemple, si le rôle de l'utilisateur est « admin », la classe « activé » sera ajoutée à l'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!