Lectures connexes:
Tutoriel d'introduction angularjs: expressions angularjs
AngularJS Tutoriel d'introduction: directive AngularJS
Dans le tutoriel précédent sur les expressions et les directives, on apprend que le modèle AngularJS (modèle NG) peut lier les valeurs dans les champs d'entrée HTML aux variables créées par 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> <div ng-app = "" ng-init = "name = 'jone> <body> <entrée ng-model = "name"> </div> </od body> </html>
Liaison bidirectionnelle AngularJS Bidirectional Bibling fait référence à la liaison du modèle NG au domaine d'entrée de HTML, ainsi qu'aux attributs des angularjs. Par conséquent, lorsque la valeur du domaine d'entrée change, les valeurs d'attribut d'AngularJS changeront également.
<! 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 Snow ";}); </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>La directive sur l'état de l'application NG-model peut fournir des valeurs d'état pour les données d'application.
sale lorsque les données sont modifiées, le statut est vrai et il n'a pas été modifié en faux. Même s'il est modifié à la valeur d'origine, c'est vrai.
Valide la valeur d'entrée est vraie lorsqu'elle est légale et fausse si elle n'est pas légale.
Touché par l'écran tactile en cliquant comme vrai, sans toucher comme faux.
Appliquer les styles CSS en fonction du statut
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </dcript> </head> <pyory> entrée.ng-invalid {bandlecord: LightBlue;} </ style> <body> <form ng-app = "" name = "myform"> Entrez votre nom: <entrée name = "MyAddress" ng-model = "text" requis> </ form> </ body> </html>Le champ de saisie ajoute l'état requis. Lorsqu'il n'y a pas d'entrée dans le champ de saisie, le modèle NG ajoute le style ng-invalide au champ de saisie. Sinon, supprimez le style NG-invalid. La directive NG-Model ajoute / supprime les styles suivants en fonction de l'état du champ de formulaire: - ng-empty - ng-not-empty - ng-touched - ng-tunched - ng-valide - ng-invalid - ng-diirty - ng en fin
<! 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"> n'est pas une adresse e-mail légale </span> </ form> </ body> </html>
Lorsque l'attribut myform.myaddress. $ Error.email est vrai (le format de boîte aux lettres est incorrect), NG-show contrôlera l'affichage du contenu Span.
Le contenu ci-dessus est le modèle AngularJS présenté par l'éditeur par le tutoriel d'introduction angularjs. J'espère que ce sera utile à tous!