Qu'est-ce que ng-model dans AngularJs?
ng-model est une directive dans Angular.JS qui représente des modèles et son objectif principal est de lier la "vue" au "modèle".
Par exemple, supposons que vous vouliez présenter une page simple à l'utilisateur final, comme celle illustrée ci-dessous, qui demande à l'utilisateur de saisir le «prénom» et le «nom de famille» dans les zones de texte. Et puis vous vouliez vous assurer que vous stockiez les informations que l'utilisateur a entrées dans votre modèle de données.
Vous pouvez utiliser la directive ng-model pour mapper les champs de zone de texte "Prénom" et "Nom" à votre modèle de données.
La directive ng-model garantira que les données de la "vue" et de celle de votre "modèle" seront synchronisées tout le temps.
Dans ce didacticiel, vous apprendrez-
- L'attribut ng-model
- Comment utiliser ng-model
- Zone de texte
- Éléments d'entrée
- Sélectionner la liste déroulante du formulaire d'élément
L'attribut ng-model
Comme indiqué dans l'introduction de ce chapitre, l'attribut ng-model est utilisé pour lier les données de votre modèle à la vue présentée à l'utilisateur.
L'attribut ng-model est utilisé pour,
- Commandes de liaison telles que l'entrée, la zone de texte et les sélections dans la vue dans le modèle.
- Fournissez un comportement de validation - par exemple, une validation peut être ajoutée à une zone de texte que seuls des caractères numériques peuvent être saisis dans la zone de texte.
- L'attribut ng-model maintient l'état du contrôle (Par état, nous voulons dire que le contrôle et les données sont tenus d'être toujours synchronisés. Si la valeur de nos données change, cela changera automatiquement la valeur du contrôle et vice versa)
Comment utiliser ng-model
1) Zone de texte
La balise de zone de texte est utilisée pour définir un contrôle de saisie de texte multiligne. La zone de texte peut contenir un nombre illimité de caractères et le texte est rendu dans une police de largeur fixe.
Voyons maintenant un exemple simple de la façon dont nous pouvons ajouter la directive ng-model à un contrôle de zone de texte.
Dans cet exemple, nous voulons montrer comment nous pouvons passer une chaîne multiligne du contrôleur à la vue et attacher cette valeur au contrôle de zone de texte.
Event Registration Guru99 Global Event
Explication du code:
- La directive ng-model est utilisée pour attacher la variable membre appelée "pDescription" au contrôle "textarea".
La variable "pDescription" contiendra en fait le texte, qui sera transmis au contrôle de zone de texte. Nous avons également mentionné 2 attributs pour le contrôle textarea qui est rows = 4 et cols = 50. Ces attributs ont été mentionnés afin que nous puissions afficher plusieurs lignes de texte. En définissant ces attributs, la zone de texte aura désormais 4 lignes et 50 colonnes afin de pouvoir afficher plusieurs lignes de texte.
- Ici, nous attachons la variable membre à l'objet de portée appelé "pDescription" et mettons une valeur de chaîne à la variable.
- Notez que nous mettons le littéral / n dans la chaîne afin que le texte puisse être composé de plusieurs lignes lorsqu'il est affiché dans la zone de texte. Le littéral / n divise le texte en plusieurs lignes afin qu'il puisse être rendu dans le contrôle textarea sous forme de plusieurs lignes de texte.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez le code dans le navigateur.
Production:
De la sortie
- On peut clairement voir que la valeur affectée à la variable pDescription dans le cadre de l'objet scope a été transmise au contrôle textarea.
- Par la suite, il a été affiché lors du chargement de la page.
2) Éléments d'entrée
La directive ng-model peut également être appliquée aux éléments d'entrée tels que la zone de texte, les cases à cocher, les boutons radio, etc.
Regardons un exemple de la façon dont nous pouvons utiliser le ng-model avec le type d'entrée "textbox" et "checkbox".
Ici, nous aurons un type de saisie de texte qui aura le nom de "Guru99" et il y aura 2 cases à cocher, l'une qui sera marquée par défaut et l'autre ne sera pas marquée.
Event Registration Guru99 Global Event
Explication du code:
- La directive ng-model est utilisée pour attacher la variable membre appelée "pname" au contrôle de texte de type d'entrée. La variable "pname" contiendra le texte de "Guru99" qui sera transmis au contrôle de saisie de texte. Notez que n'importe quel nom peut être donné au nom de la variable membre.
- Ici, nous définissons notre première case à cocher "Controllers" qui est attachée à la variable membre Topics.Controllers. La case à cocher sera cochée pour ce contrôle de contrôle.
- Ici, nous définissons notre première case à cocher "Modèles" qui est attachée à la variable membre Topics.Models. La case à cocher ne sera pas cochée pour ce contrôle de contrôle.
- Ici, nous attachons la variable membre appelée "pName" et mettons une valeur de chaîne "Guru99".
- Nous déclarons une variable de tableau membre appelée "Topics" et lui attribuons deux valeurs, la première est "true" et la seconde est "false".
Ainsi, lorsque la première case à cocher obtient la valeur true, la case à cocher sera cochée pour ce contrôle, et de même, puisque la deuxième valeur est false, la case à cocher ne sera pas cochée pour ce contrôle.
Si le code est exécuté avec succès, la sortie suivante s'affiche lorsque vous exécutez votre code dans le navigateur.
Production:
De la sortie,
- On voit clairement que la valeur attribuée à la variable pName est "Guru99"
- Puisque la première valeur de contrôle est "true", elle a réussi, la case à cocher est cochée pour la case "Contrôleurs". De même, puisque la deuxième valeur est fausse, la case à cocher n'est pas cochée pour la case à cocher "Modèles".
3) Sélectionnez la liste déroulante du formulaire d'élément
La directive ng-model peut également être appliquée à l'élément de sélection et être utilisée pour remplir les éléments de liste dans la liste de sélection.
Regardons un exemple de la façon dont nous pouvons utiliser le ng-model avec le type d'entrée select.
Ici, nous aurons un type d'entrée de texte qui aura le nom de "Guru99" et il y aura une liste de sélection avec 2 éléments de liste de "Controller" et "Models".
Event Registration Guru99 Global Event
- La directive ng-model est utilisée pour attacher la variable membre appelée "Topics" au contrôle de type de sélection. À l'intérieur du contrôle de sélection, pour chacune des options, nous attachons la variable membre de Topics.option1 pour la première option et Topics.option2 pour la deuxième option.
- Ici, nous définissons notre variable de tableau Topics qui contient 2 paires clé-valeur. La première paire a la valeur "Contrôleurs" et la seconde a la valeur "Modèles". Ces valeurs seront transmises pour sélectionner la balise d'entrée dans la vue.
Si le code est exécuté avec succès, la sortie suivante sera affichée.
Production:
De la sortie, on peut voir que la valeur assignée à la variable pName est "Guru99" et nous pouvons voir que le contrôle d'entrée de sélection a les options de "Contrôleurs" et "Modèles".
Résumé
- Les modèles dans Angular JS sont représentés par la directive ng-model. L'objectif principal de cette directive est de lier la vue au modèle. Comment créer un contrôleur simple à l'aide des directives ng-app, ng-controller et ng-model.
- La directive ng-model peut être liée à un contrôle d'entrée "zone de texte" et des chaînes multilignes peuvent être passées du contrôleur à la vue.
- La directive ng-model peut être liée à des contrôles d'entrée tels que les contrôles de texte et de case à cocher pour les rendre plus dynamiques au moment de l'exécution.
- La directive ng-model peut également être utilisée pour remplir une liste de sélection avec des options qui peuvent être affichées à l'utilisateur.