O melhor tutorial AngularJS directiva ng-modelo em 2024. Neste tutorial você pode aprender
directiva ng-modelo,AngularJS exemplos,forma vinculativa,AngularJS exemplos,Validar a entrada do usuário,AngularJS exemplos,O estado do aplicativo,AngularJS exemplos,classe CSS,AngularJS exemplos,
AngularJS directiva ng-modelo
instruções ng-modelo é usado para vincular dados de aplicativos para o controlador valor HTML (input, select, textarea) de.
directiva ng-modelo
ng-model
directiva pode inserir valores de variáveis e de domínio criado ligações AngularJS.
AngularJS exemplos
<Div ng-app = "myApp " ng-controller = "myCtrl">
Nome: <ng-modelo de entrada = " nome">
</ Div>
<Script>
var app = angular.module ( 'myApp', []);
app.controller ( 'myCtrl', function ($ escopo) {
$ Scope.name = "John Doe";
});
</ Script>
tente »
forma vinculativa
Duas vias de ligação, quando você modifica o valor do campo de entrada, o valor da propriedade será também revisão AngularJS:
AngularJS exemplos
<Div ng-app = "myApp " ng-controller = "myCtrl">
Nome: <ng-modelo de entrada = " nome">
<H1> você digite: {{name}} </ h1>
</ Div>
tente »
Validar a entrada do usuário
AngularJS exemplos
<Form ng-app = "" name = "myForm">
E-mail:
<Input type = "email" name = "MyAddress" ng-model = "text">
<Span ng-show = "myForm.myAddress . $ Error.email"> não é um endereço de email válido </ span>
</ Form>
tente » O exemplo acima, a mensagem no ng-show
propriedade retorna true
vitrine.
O estado do aplicativo
ng-model
directiva prevê valor de status (inválido, sujo, tocado, erro ) para os dados do aplicativo:
AngularJS exemplos
<Form ng-app = "" name = "myForm" ng-init = "myText = 'test@w3write.com» ">
E-mail:
<Input type = "email" name = "MyAddress" ng-model = "myText" necessária> </ p>
<H1> Estado </ h1>
{{MyForm.myAddress. $ Válida}}
{{MyForm.myAddress. $ Suja}}
{{MyForm.myAddress. $ Tocou}}
</ Form>
tente »
classe CSS
ng-model
instrução com base em seus estados fornecem classes CSS para elementos HTML:
AngularJS exemplos
<Style>
input.ng-inválido {
background-color: lightblue;
}
</ Style>
<Body>
<Form ng-app = "" name = "myForm">
Digite seu nome:
<Input name = "MyAddress" ng -model = "text" necessária>
</ Form>
tente » ng-model
instrução com base no campo de formulário estado para adicionar / remover as seguintes categorias:
- NG-vazia
- ng-não-vazia
- ng-tocado
- ng-intocado
- ng-valid
- ng-inválida
- ng-suja
- NG-pendente
- ng-intocada