Syntaxe
<element ng-change="expression"></element>
|
Paramètres
Nom |
Description |
element |
Ce paramètre permet d'indiquer une balise. |
expression |
Ce paramètre permet d'indiquer une expression a exécuter quand un élément change de valeur. |
Description
Cette directive permet d'indiquer une expression à évaluer quand le contenu est changé par l'utilisateur.
Remarques
- Déclenchement lors d'un changement de modèle : La directive ng-change s'exécute lorsqu'une modification est effectuée dans un champ d'entrée lié à un
modèle AngularJS via ng-model. Elle est déclenchée après que la nouvelle valeur a été mise à jour dans le modèle.
- Nécessite un ng-model associé : ng-change fonctionne uniquement lorsqu'il est utilisé conjointement avec ng-model. Sans modèle lié, la
directive ne peut pas détecter les changements ni exécuter l'expression spécifiée.
- Différence avec l'événement change natif : Contrairement à l'événement change natif de HTML, étant déclenché
lorsque l'utilisateur quitte le champ, ng-change est activé immédiatement après chaque modification, dès que le modèle est mis à jour.
- Adapté à des interactions en temps réel : ng-change est utile pour effectuer des actions immédiates, comme la validation en temps réel, les calculs
dynamiques ou la mise à jour de contenu en fonction des modifications apportées par l'utilisateur.
- Expression AngularJS personnalisée : L'attribut ng-change accepte une expression AngularJS pouvant contenir des appels de fonctions ou des calculs
complexes. Cela offre une flexibilité dans la gestion des modifications.
- Pas déclenché par des mises à jour du modèle externe : Une particularité de ng-change est qu'il ne se déclenche pas si le modèle est modifié par du code
JavaScript ou AngularJS sans interaction utilisateur. Il s'agit d'une directive orientée vers les événements
utilisateur.
- Compatible avec divers champs d'entrée : ng-change peut être utilisé avec une variété d'éléments HTML tels
que <input>, <textarea>, <select>
ou encore des champs personnalisés, tant qu'ils sont liés à un modèle via ng-model.
- Optimisation des flux utilisateur : En évitant les recalculs ou les appels inutiles (grâce au déclenchement conditionnel basé sur les changements), ng-change
peut être utilisé pour optimiser les performances dans des formulaires complexes ou des applications dynamiques.
Dernière mise à jour : Dimanche, le 9 décembre 2018