Comment puis-je appliquer conditionnellement des classes CSS aux éléments dans AngularJS ?

Application de classe conditionnelle avec AngularJS

Dans AngularJS, vous pouvez rencontrer des scénarios dans lesquels vous devez appliquer conditionnellement une classe à un élément en fonction de certaines conditions. Voici comment y parvenir efficacement.

Problème :

Considérez un tableau d'éléments rendus sous forme de ul avec des balises li pour chaque élément. Vous avez une propriété selectedIndex sur le contrôleur et souhaitez ajouter une classe au li avec l'index correspondant.

Solution :

1. Utilisation de ng-class :

AngularJS fournit la directive ng-class, qui vous permet d'appliquer dynamiquement des classes basées sur des expressions. Pour appliquer conditionnellement la classe "selected" au li avec le selectedIndex, vous pouvez utiliser :

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

2. Utilisation de ng:class:

(Syntaxe pré-v1)

Pour les versions AngularJS antérieures à la v1, vous pouvez utiliser ng:class avec une expression qui évalue directement à un nom de classe. Par exemple :

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

Comparaison des solutions :

Bien que les deux solutions obtiennent le même résultat, elles diffèrent par leurs fonctionnalités :

• ng-class accepte un objet où les noms de propriété représentent les noms de classe et les valeurs de propriété déterminent si la classe est appliquée. Cela permet une logique d'application de classe plus complexe.
• ng:class nécessite une expression qui s'évalue en un nom de classe spécifique et est moins flexible pour gérer plusieurs classes de manière conditionnelle.

Notes supplémentaires :

Vous pouvez également utiliser cette technique pour mapper les propriétés du modèle aux noms de classe, en excluant les classes CSS du code du contrôleur. Par exemple :

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

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!