Comment utiliser « ng-model » dans AngularJS avec des EXEMPLES
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 présentée ci-dessous qui demande à l'utilisateur de saisir le « Prénom » et le « Nom » dans les zones de texte. Et puis vous vouliez vous assurer que vous stockiez les informations que l'utilisateur a saisies 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 celles de votre « modèle » sont synchronisées à tout moment.
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,
- Liaison des contrôles tels que la saisie, 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 afin que seuls des caractères numériques puissent être saisis dans la zone de texte.
- L'attribut ng-model maintient l'état du contrôle (par état, nous entendons que le contrôle et les données doivent toujours être synchronisés. Si la valeur de nos données change, elle changera automatiquement la valeur dans le contrôle et vice versa)
Comment utiliser ng-modèle
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 s'affiche dans une police à 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 transmettre une chaîne multiligne du contrôleur à la vue et attacher cette valeur au contrôle de zone de texte.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> </head> <body > <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> <textarea rows="4" cols="50" ng-model="pDescription"></textarea><br><br> </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pDescription="This topic looks at how Angular JS works \nModels in Angular JS"}); </script> </body> </html>
Explication du code :
- Le directive du modèle ng est utilisé pour attacher la variable membre appelée «pDescription" au contrôle "textarea". Le "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 sont 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 scope appelé «pDescription" et en mettant une valeur de chaîne à la variable.
- Notez que nous mettons le littéral /n dans la chaîne afin que le texte puisse comporter 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 s'afficher 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'affichera lorsque vous exécutez le code dans le navigateur.
Sortie :
De la sortie,
- On voit clairement que la valeur attribuée au pDescriptLa variable ion faisant partie 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 modèle ng avec le type d'entrée « textbox » et « checkbox ».
Ici, nous aurons un type de saisie de texte qui portera le nom de « Guru99 » et il y aura 2 cases à cocher, une qui sera cochée par défaut et l'autre ne sera pas cochée.
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> </head> <body > <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> Name : <input type="text" ng-model="pname"><br> Topic : <br> <input type="checkbox" ng-model="Topic.Controller">Controller<br> <input type="checkbox" ng-model="Topic.Models">Models </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pname="Guru99"; $scope.Topic = { Controller:true, Models:false }; }); </script> </body> </html>
Explication du code :
- Le directive du modèle ng est utilisé 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.
- Nous définissons ici notre première case à cocher « Contrôleurs » qui est attachée à la variable membre Topics.Controllers. La case à cocher sera cochée pour ce contrôle de contrôle.
- Nous définissons ici 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 de « Guru99 ».
- Nous déclarons une variable de tableau membre appelée « Sujets » et lui donnons deux valeurs, la première est « vrai » et la seconde est « faux ». Ainsi, lorsque la première case à cocher obtient la valeur vrai, la case à cocher sera marquée pour ce contrôle, et de même, puisque la deuxième valeur est fausse, 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'affichera lorsque vous exécutez votre code dans le navigateur.
Sortie :
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 « vrai », 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 « Modèles ».
3) Sélectionnez un élément dans la liste déroulante
La directive ng-model peut également être appliquée à l'élément select et être utilisée pour remplir les éléments de la liste de sélection.
Regardons un exemple de la façon dont nous pouvons utiliser le modèle ng avec le type d'entrée select.
Ici, nous aurons un type de saisie de texte qui portera le nom de « Guru99 » et il y aura une liste de sélection avec 2 éléments de liste de « Contrôleur » et « Modèles ».
<!DOCTYPE html> <html> <head> <meta chrset="UTF 8"> <title>Event Registration</title> <link rel="stylesheet" href="css/bootstrap.css"/> <script src="https://code.angularjs.org/1.6.9/angular.js"></script> </head> <body > <h1> Guru99 Global Event</h1> <div ng-app="DemoApp" ng-controller="DemoCtrl"> <form> Topic Description:<br> <br> Name : <input type="text" ng-model="pName" value="Guru99"><br> Topic : <br> <select ng-model="Topics"> <option>{{Topics.option1}}</option> <option>{{Topics.option2}}</option> </select> </form> </div> <script> var app = angular.module('DemoApp',[]); app.controller('DemoCtrl', function($scope){ $scope.pName="Guru99"; $scope.Topics = { option1 : "Controller", option2 : "Module" }; }); </script> </body> </html>
- Le directive du modèle ng est utilisé pour attacher la variable membre appelée « Sujets » 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 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.
Sortie :
À partir de la sortie, on peut voir que la valeur attribuée à la variable pName est « Guru99 » et nous pouvons voir que le contrôle d'entrée sélectionné a les options « 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 transmises 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.