Syntaxe
<input ng-value="expression"></element>
|
Paramètres
Nom |
Description |
element |
Ce paramètre permet d'indiquer une balise. |
expression |
Ce paramètre permet d'indiquer une expression définissant l'attribut de la valeur de l'élément. |
Description
Cette directive permet de fixer la valeur d'une balise d'entrée de donnée.
Remarques
- Définition et rôle : La directive ng-value est utilisée pour définir dynamiquement la valeur d'un élément HTML,
comme un champ d'entrée (input) de type radio ou checkbox. Contrairement à l'attribut HTML standard value,
elle permet de lier la valeur à une expression AngularJS. Cela s'avère utile lorsqu'une valeur est déterminée dynamiquement ou dépend d'une variable dans le $scope.
- Différence avec l'attribut value : Contrairement à value, qui définit une valeur statique, ng-value accepte des expressions AngularJS.
Par exemple, avec value="42", la valeur reste toujours 42, tandis que ng-value="someVariable" modifie la valeur en fonction du contenu de someVariable, offrant
une meilleure flexibilité.
- Usage courant avec des boutons radio : ng-value est particulièrement utile pour les boutons radio lorsque vous souhaitez lier un modèle à une valeur
dynamique. Par exemple, si vous avez une liste d'objets, vous pouvez facilement attribuer chaque objet comme valeur d'un bouton radio, et non simplement un identifiant ou une
valeur primitive.
- Compatibilité avec ng-model : Pour que ng-value fonctionne correctement, il est souvent utilisé conjointement avec ng-model. Cela permet
d'associer une valeur spécifique au modèle sous-jacent. Lorsque l'utilisateur sélectionne une option, le modèle prend automatiquement la valeur définie par ng-value.
- Expressions complexes : La directive ng-value peut accepter des expressions complexes, et pas seulement des valeurs primitives. Par exemple, il est possible
de passer un objet ou une fonction retournant une valeur, ce qui n'est pas possible avec l'attribut HTML value.
- Cas d'utilisation avec des listes d'objets : Si vous avez une liste d'objets et que vous souhaitez entreposer l'objet sélectionné dans le modèle, ng-value est
indispensable. Par exemple, avec <input type="radio" ng-model="selected" ng-value="item">, selected contiendra directement l'objet item et non un identifiant.
- Problèmes potentiels avec les types : Lorsque vous utilisez ng-value avec des types primitifs, il peut y avoir des problèmes inattendus si le type de données
change. Par exemple, un 42 en tant que nombre peut ne pas être égal à "42" en tant que chaîne. Il est donc recommandé de garder un oil sur la cohérence des types.
- Interaction avec les directives personnalisées : ng-value peut être combiné avec des directives personnalisées pour gérer des cas spécifiques, comme la
validation ou la transformation de données. Cette combinaison est puissante pour créer des formulaires dynamiques et interagir avec des structures complexes.
Dernière mise à jour : Dimanche, le 9 décembre 2018