Directiva AngularJS Ng-Model
La directiva NG-Model se utiliza para vincular los datos de la aplicación al valor del controlador HTML (Entrada, Seleccionar, TextAREA).
comando ng-model
La Directiva NG-Model une el valor del campo de entrada a una variable creada por AngularJS.
Instancia de angularjs
<! 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-concontroller = "myctrl"> nombre: <input ng-model = "name"> </div> var> var app = angular.module ('myapp', []); app.controller ('myctrl', function ($ scope) {$ scope.name = "John doe";}); </cripte> <p> use el moderador de ng a ng the tinte de la entrada de la entrada de ng the theal de la entrada del valor de la entrada de ng the Tail. dominio a las propiedades del controlador. </p> </body> </html>Resultados de ejecución:
nombre:Use la directiva NG-Model para unir el valor del campo de entrada a las propiedades del controlador.
Enlace bidireccional
Enlace bidireccional, al modificar el valor del campo de entrada, el valor de la propiedad AngularJS también se modificará:
Instancia de angularjs
<! 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 " Doe ";}); </script> <p> Modifique el valor del cuadro de entrada, y el nombre del título también se modificará en consecuencia. </p> </body> </html>Resultados de ejecución:
nombre:
Entraste: John Doe
Modifique el valor del cuadro de entrada, y el nombre del título también se modificará en consecuencia.
Verificar la entrada del usuario
Instancia de 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> <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> </orm> <p> Ingrese su dirección de correo electrónico en el cuadro de entrada. Si no es una dirección de correo electrónico legal, aparecerá un mensaje de inmediato. </p> </body> </html>
Resultados de ejecución:
Correo electrónico:
Ingrese su dirección de correo electrónico en el cuadro de entrada. Si no es una dirección de correo electrónico legal, aparecerá un mensaje de inmediato.
Clase CSS
La Directiva NG-Model proporciona una clase CSS para elementos HTML basados en su estado:
Instancia de angularjs
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> <syle> input.ng-invalid {de fondo-color: LightBlue;} </style> </head> <body> <form ng-app = "" name = "myForm"> Ingrese su nombre: <input name = "myname" ng-model = "mytext" requerido> </form> <p> Editar campos de texto, y los colores de fondo de diferentes estados se enviarán para cambiar. </p> <p> El atributo requerido se agrega al campo de texto, que se requiere, y es ilegal si está vacío. </p> </body> </html>Resultados de ejecución:
Editar el campo de texto, los colores de fondo de diferentes estados se enviarán para cambiar.
El campo de texto ha agregado una propiedad requerida, que es necesaria, y es ilegal si está vacía.
La Directiva NG-Model agrega/elimina las siguientes clases de acuerdo con el estado del campo de formulario:
ng-vacío
ng-no-vacío
ng-toque
ng-intoqueado
ng-valid
ng-inválido
ng-dirty
ng pendiente
ng-prístino