Leituras relacionadas:
Tutorial Introdutório de AngularJS: Expressões AngularJS
Tutorial Introdutório do AngularJS: AngularJS Diretiva
No tutorial anterior sobre expressões e diretrizes, sabe-se que o modelo AngularJS (modelo NG) pode ligar valores nos campos de entrada HTML a variáveis criadas por 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> </" Snow '"> Nome: <insput ng-model =" name "> </div> </body> </html>
Ligação bidirecional A ligação bidirecional AngularJS refere-se à ligação do modelo NG ao domínio de entrada do HTML e também aos atributos dos angulares. Portanto, quando o valor do domínio de entrada muda, os valores de atributo dos angulares também serão alterados.
<! 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', []; Neve ";}); </script> <p> Modifique o valor da caixa de entrada e o nome do título também será modificado de acordo. </p> </body> </html>O status do aplicativo Diretiva NG-Model pode fornecer valores de status para dados do aplicativo.
Sujo quando os dados são modificados, o status é verdadeiro e não foi modificado para false. Mesmo se modificado para o valor original, é verdade.
Válido O valor da entrada é verdadeiro quando é legal e falso se não for legal.
Tocada pela tela de toque clicando como verdadeira, sem tocar como falsa.
Aplique estilos CSS de acordo com o status
<!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><style>input.ng-invalid {background-color: LightBlue;} </style> <body> <form ng-pp = "" name = "myform"> digite seu nome: <input name = "myAddress" ng-model = "text" requerido> </morm> </body> </html>O campo de entrada adiciona o estado necessário. Quando não há entrada no campo de entrada, o modelo NG adiciona o estilo NG-Intervalid ao campo de entrada. Caso contrário, remova o estilo NG-Intervalid. A Diretiva Ng-Model adiciona/remove os seguintes estilos de acordo com o status do campo de formulário:-ng-vazio-ng-não-vazio-ng-touched-ng-até-adjunto-ng-valídeo-ng-interfilid-ng-dirty-ng-pending-ng-pristina use ng-model para verificar
<! 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> </morm> </body> </html>
Quando o atributo myform.myaddress. $ Error.ail é verdadeiro (o formato da caixa de correio está incorreto), o NG-SHOW controlará a exibição do conteúdo do span.
O conteúdo acima é o modelo AngularJS introduzido pelo editor pelo tutorial introdutório do AngularJS. Espero que seja útil para todos!