Comment les directives AngularJS peuvent-elles être utilisées pour le style CSS conditionnel ?

Style CSS conditionnel dans AngularJS

AngularJS fournit diverses directives pour appliquer des styles CSS de manière conditionnelle ou dynamique. Ces directives incluent :

• ng-class : À utiliser lorsque les styles CSS sont corrigés.
• ng-style : À utiliser lorsque le style les valeurs changent dynamiquement.
• ng-show et ng-hide : Utilisez pour afficher ou masquer des éléments en modifiant le CSS.
• ng-if : Utilisez pour vérifier une seule condition et modifier le DOM.
• ng-switch : Utilisez pour vérifier plusieurs conditions et modifier le DOM.
• ng-disabled et ng-readonly : Utilisé pour restreindre le comportement des éléments de formulaire.
• ng-animate : À utiliser pour ajouter des transitions et des animations CSS3.

Pour appliquer des styles de manière conditionnelle, des liens angulaires une propriété de modèle à un élément d'interface utilisateur via ng-model. La saisie de l'utilisateur est ensuite utilisée pour modifier cette propriété, ce qui déclenche à son tour la directive appropriée pour mettre à jour les styles CSS.

Exemple pour Q1 : Suppression d'éléments

ng-class est convient à ce scénario, où les styles CSS sont capturés dans une classe. L'expression de classe ng peut être une chaîne, un tableau ou un objet de noms de classe mappés à des valeurs booléennes. Pour les éléments cochés, la classe « en attente de suppression » peut être appliquée :

<div ng-repeat="item in items" ng-class="{ 'pending-delete': item.checked }">
  ... Item display content ...
  <input type="checkbox" ng-model="item.checked" />
</div>

Exemple pour Q2 : Personnalisation de l'utilisateur

Pour le style CSS dynamique, ng-style est une meilleure option. Il prend une expression qui correspond à un objet de noms de style CSS mappés à des valeurs. Par exemple, la couleur d'arrière-plan choisie par un utilisateur peut être définie :

<div class="main-body" ng-style="{ color: myColor }">
  ...
  <input type="text" ng-model="myColor" placeholder="Enter a color name" />
</div>

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!