Comment puis-je appliquer efficacement des classes conditionnelles pour lister des éléments dans AngularJS ?

Meilleures pratiques pour l'application de classes conditionnelles dans AngularJS

Dans AngularJS, l'application conditionnelle de classes à des éléments peut être réalisée de plusieurs manières. Explorons les solutions les plus optimales en fonction de votre scénario spécifique.

Scénario : Un tableau est rendu sous forme de liste non ordonnée et vous souhaitez ajouter une classe à l'élément de liste avec l'index sélectionnéIndex contrôlé par la propriété selectedIndex sur le contrôleur.

Approche initiale :

Vous Nous répliquons actuellement manuellement le code de l'élément de liste et ajoutons la classe à l'une des balises d'élément de liste. Bien que cette méthode fonctionne, elle introduit une duplication inutile.

Solution 1 : directive ng-class avec expressions évaluées

Au lieu d'utiliser des noms de classe CSS dans le contrôleur, vous pouvez utilisez une expression pour définir dynamiquement le nom de la classe. Voici comment :

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

Remarque : Utilisez l'ancienne syntaxe avec les deux-points en raison du mécanisme d'évaluation requis pour cette approche.

Solution 2 : ng -class Directive avec des objets conditionnels

AngularJS prend également en charge l'attribution d'objets à la directive ng-class. Chaque nom de propriété représente un nom de classe et sa valeur détermine si la classe est appliquée.

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

Remarque supplémentaire :

Bien que les deux solutions obtiennent le même résultat, ils ne sont pas fonctionnellement équivalents. La solution 2 vous permet de mapper les propriétés du modèle aux noms de classe et de les conserver en dehors du code du contrôleur. Cela offre une plus grande flexibilité et améliore la lisibilité du code.

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!