Lecturas relacionadas:
Tutorial introductorio de AngularJS: expresiones Angularjs
Tutorial introductorio de AngularJS: Directiva AngularJS
En el tutorial anterior sobre expresiones y directivas, se sabe que el modelo AngularJS (modelo NG) puede unir valores en los campos de entrada HTML a las variables creadas por AngularJS.
<! Doctype html> <html> <fead> <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 =" nombre "name" <input ng-model = "name"> </div> </body> </html>
Unión bidireccional AngularJS La unión bidireccional se refiere a la unión del modelo Ng al dominio de entrada de HTML, y también a los atributos de AngularJS. Por lo tanto, cuando cambia el valor del dominio de entrada, los valores de atributo de AngularJS también cambiarán.
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <bod> ng-Controller = "myctrl"> nombre: <input ng-model = "name"> <h1> Ingresó: {{name}} </h1> </div> <script> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name " Nieve ";}); </script> <p> Modifique el valor del cuadro de entrada, y el nombre del título también se modificará en consecuencia. </p> </body> </html>La directiva de estado de estado de la aplicación Ng-Model puede proporcionar valores de estado para los datos de la aplicación.
sucio cuando los datos se modifican, el estado es verdadero y no se ha modificado como falso. Incluso si se modifica al valor original, es cierto.
Válido el valor de entrada es verdadero cuando es legal y falso si no es legal.
Tocado por la pantalla táctil haciendo clic como verdadero, sin tocar como falso.
Aplicar estilos CSS de acuerdo con el estado
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body> <style> input.nginvalid {fondo-coro: LightBlue;} </style> <body> <form ng-app = "" name = "myForm"> Ingrese su nombre: <input name = "myAddress" ng-model = "text" requerido> </form> </body> </html>El campo de entrada agrega el estado requerido. Cuando no hay entrada en el campo de entrada, el modelo NG agrega el estilo Ng-inválido al campo de entrada. De lo contrario, elimine el estilo Ng-inválido. La Directiva Ng-Model agrega/elimina los siguientes estilos de acuerdo con el estado del campo de formulario:-Ng-E-E-E-E-ESPLAY
<! Doctype html> <html> <fead> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <form ng-app-app = "name =" myform "> correos electrónicos:" name = "myAddress" ng-model = "text"> <span ng-show = "myform.myaddress. $ error.email"> no es una dirección de correo electrónico legal </span> </form> </body> </html>
Cuando el atributo myForm.myaddress. $ Error.email es verdadero (el formato del buzón es incorrecto), Ng-show controlará la visualización del contenido de SPAN.
El contenido anterior es el modelo AngularJS presentado por el editor para usted por el tutorial introductorio de AngularJS. ¡Espero que sea útil para todos!