Directive AngularJS NG-Model
La directive du modèle NG est utilisée pour lier les données d'application à la valeur du contrôleur HTML (entrée, sélection, textarea).
Commande NG-Model
La directive du modèle NG lie la valeur du champ de saisie à une variable créée par AngularJS.
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" Ng-Controller = "MyCtrl"> Name: <Input ng-model = "name"> </div> <script> var app = angular.module ('myApp', []); app.Controller ('myctrl', fonction ($ scope) {$ scope.name = "John Doe";}); </cript> <p> domaine aux propriétés du contrôleur. </p> </ body> </html>Résultats en cours:
nom:Utilisez la directive NG-Model pour lier la valeur du champ de saisie aux propriétés du contrôleur.
Reliure à double sens
Liaison bidirectionnelle, lors de la modification de la valeur du champ de saisie, la valeur de la propriété AngularJS sera également modifiée:
Instance angularjs
<! Doctype html> <html> <éad> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> </ad> <body> <div ng-app = "MyApp" ng-controlller = "myctrl"> name: <input ng-model = "name"> <h1> vous avez entré: {{name}} </h1> </div> <cript> var app = angular.module ('myApp', []); app.controller ("johN-même Doe ";}); </cript> <p> Modifiez la valeur de la zone d'entrée, et le nom du titre sera également modifié en conséquence. </p> </ body> </html>Résultats en cours:
nom:
Vous êtes entré: John Doe
Modifiez la valeur de la zone d'entrée et le nom du titre sera également modifié en conséquence.
Vérifiez l'entrée de l'utilisateur
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </ head> <body> <form ng-app = "" name = "MyForm"> CEMPLORS " name = "myAddress" ng-model = "text"> <span ng-show = "myform.myaddress. $ error.email"> pas une adresse e-mail légale </span> </ form> <p> Entrez votre adresse e-mail dans la case d'entrée. S'il ne s'agit pas d'une adresse e-mail légale, un message rapide apparaîtra. </p> </ body> </html>
Résultats en cours:
E-mail:
Entrez votre adresse e-mail dans la zone de saisie. S'il ne s'agit pas d'une adresse e-mail légale, un message rapide apparaîtra.
Classe CSS
La directive du modèle NG fournit une classe CSS pour les éléments HTML en fonction de leur état:
Instance angularjs
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </cript> <style> Input.ng-invalid {background-color: LightBlue;} </ Style> </ head> <body> <form ng-app = "" name = "myform"> Entrez votre nom: <entrée name = "myname" ng-model = "mytext" requis> </ form> <p> modifiez les champs de texte, et les couleurs d'arrière-plan de différents états seront envoyées pour changer. </p> <p> L'attribut requis est ajouté au champ de texte, qui est requis, et est illégal si vide. </p> </ body> </html>Résultats en cours:
Modifier le champ de texte, les couleurs d'arrière-plan de différents états seront envoyées pour changer.
Le champ de texte a ajouté une propriété requise, qui est requise, et est illégale si vide.
La directive du modèle NG ajoute / supprime les classes suivantes en fonction de l'état du champ de formulaire:
ng-vide
ng-non vide
nul
ng-toached
ng-valide
ng-invalide
ng-mât
ng en attente
ng-actif