Syntaxe
<element ng-class="expression"></element>
|
Paramètres
| Nom |
Description |
| element |
Ce paramètre permet d'indiquer une balise. |
| expression |
Ce paramètre permet d'indiquer une expression retournant un ou plusieurs noms de classe. |
Description
Cette directive permet d'indiquer les classes CSS dans les balises HTML.
Remarques
- Ajout dynamique de classes CSS : La directive ng-class permet d'ajouter ou de supprimer des classes CSS
dynamiquement en fonction de l'évaluation d'expressions AngularJS. Elle offre un contrôle flexible pour personnaliser l'apparence des éléments
HTML en fonction des données ou des états de l'application.
- Prise en charge des objets : ng-class peut recevoir un objet JavaScript où les clefs sont des noms
de classes et les valeurs sont des expressions évaluées à true ou false. Par exemple : {'active': isActive, 'disabled': isDisabled}. Cela permet d'activer ou
désactiver plusieurs classes simultanément.
- Support des tableaux de classes : En plus des objets, ng-class accepte également des tableaux de noms de classes. Cela est utile lorsque plusieurs classes
doivent être appliquées dynamiquement en fonction d'une logique ou d'un modèle.
- Évaluation dynamique : Les expressions passées à ng-class sont évaluées dynamiquement. Si le résultat de l'expression change (par exemple, en réponse à
une interaction utilisateur), les classes sont automatiquement mises à jour, offrant un rendu en temps réel.
- Combinaison avec class statique : ng-class peut être utilisé en complément de l'attribut class de
HTML. Les classes statiques spécifiées dans l'attribut class restent inchangées, tandis que celles ajoutées par ng-class
sont gérées dynamiquement.
- Facilite le contrôle des styles conditionnels : Grâce à sa flexibilité, ng-class simplifie l'application conditionnelle de styles
CSS, éliminant le besoin de manipuler directement les classes via JavaScript, ce
qui améliore la lisibilité et la maintenance du code.
- Compatible avec ng-repeat : ng-class est fréquemment utilisé avec ng-repeat pour appliquer des classes spécifiques à chaque élément d'une liste
en fonction de conditions propres à chaque itération, comme la mise en surbrillance d'un élément sélectionné.
- Peut être utilisé avec des fonctions : L'expression passée à ng-class peut inclure des appels de fonctions définies dans le contrôleur ou l'étendu
d'AngularJS. Cela permet de calculer dynamiquement les classes à appliquer en fonction de logiques complexes.
Dernière mise à jour : Dimanche, le 9 décembre 2018
