Comment puis-je appliquer et supprimer conditionnellement des styles CSS dans AngularJS ?

Application de style CSS conditionnelle dans AngularJS

Question : Comment les styles CSS peuvent-ils être appliqués et supprimés de manière conditionnelle dans AngularJS ?

Réponse : AngularJS fournit plusieurs directives pour gérer les styles CSS dynamiquement :

• ng-class : Appliquer ou supprimer des classes CSS en fonction d'une condition.
• ng-style : Appliquer un CSS spécifique styles, même s'ils ne peuvent pas être capturés dans un cours.
• ng-show et ng-hide : Basculer la visibilité des éléments en fonction d'une condition.
• ng-if : Afficher ou masquer les éléments en fonction d'une seule condition.
• ng-switch : Gérer plusieurs visibilités exclusives scénarios.
• ng-disabled et ng-readonly : Contrôler le comportement des éléments de formulaire.
• ng-animate : Ajouter animations et transitions vers les éléments.

Q1 : Style conditionnel pour l'élément Suppression :

Utilisez ng-class pour activer/désactiver une classe en attente de suppression lorsqu'un élément est marqué pour suppression.

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

Q2 : Interface utilisateur personnalisable :

Utilisez ng-style pour appliquer dynamiquement des styles CSS en fonction des entrées de l'utilisateur.

<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!