Diretiva AngularJS Ng-Model
A diretiva NG-Model é usada para vincular dados de aplicação ao valor do controlador HTML (entrada, selecionar, textarea).
comando ng-modelo
A Diretiva Ng-Modelo liga o valor do campo de entrada a uma variável criada pelo AngularJS.
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> nome: <input ng-model = "name"> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrl', função ($ scope) {$ scope.name = "john doe";}; o domínio de entrada para as propriedades do controlador. </p> </body> </html>Resultados em execução:
nome:Use a Diretiva NG-Modelo para vincular o valor do campo de entrada às propriedades do controlador.
Ligação bidirecional
Ligação bidirecional, ao modificar o valor do campo de entrada, o valor da propriedade AngularJS também será modificado:
Instância 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> </body> <body> <body> <dbody-kng ng "</script> </body> <dbody> <dbody-kng.-Ngpp. ng-Controller = "myctrl"> nome: <input ng-model = "name"> <h1> você entrou: {{name}} </h1> </div> <cript> var app = angular.module ('myApp', []); app.Controller ('myctrllo', funcionar ($pApp ', []); App.Controller (' myctrllo ', funcionar ($pApp', []; Doe ";}); </sCript> <p> Modificar o valor da caixa de entrada e o nome do título também será modificado de acordo. </p> </body> </html>Resultados em execução:
nome:
Você entrou: John Doe
Modifique o valor da caixa de entrada e o nome do título também será modificado de acordo.
Verifique a entrada do usuário
Instância 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> </" type = "email" name = "myAddress" ng-model = "text"> <span ng-show = "myform.myaddress. $ error.mail"> Não é um endereço de email legal </span> </mant> <p> Digite seu endereço de e-mail na caixa de entrada. Se não for um endereço de e -mail legal, uma mensagem rápida será exibida. </p> </body> </html>
Resultados em execução:
E-mail:
Digite seu endereço de e -mail na caixa de entrada. Se não for um endereço de e -mail legal, uma mensagem rápida será exibida.
Classe CSS
A diretiva NG-Model fornece uma classe CSS para elementos HTML com base em seu estado:
Instância 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> <styster> input.g-ng-nts LightBlue;} </style> </head> <body> <form ng-app = "" name = "myform"> insira seu nome: <input name = "myname" ng-model = "myText" requerido> </morm> <p> Editar campos de texto e as cores de fundo de diferentes estados serão enviadas para mudar. </p> <p> O atributo necessário é adicionado ao campo de texto, o que é necessário e é ilegal se vazio. </p> </body> </html>
Resultados em execução:
Edite o campo de texto, as cores de fundo de diferentes estados serão enviadas para mudar.
O campo de texto adicionou uma propriedade necessária, que é necessária e é ilegal se vazia.
A diretiva NG-Model adiciona/remove as seguintes classes de acordo com o status do campo de formulário:
ng e vazios
ng-não vazio
ng-touched
ng-junto
ng-válido
ng-intervalo
ng-Dirty
ng-pendente
ng-pristina