tutoriais mais recente desenvolvimento web
 

AngularJS Directiva de entrada

❮ AngularJS Referência

Exemplo

Um campo de entrada com o de ligação de dados:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Tente você mesmo "

Definição e Uso

AngularJS modifica o comportamento padrão do <input> elementos, mas somente se o ng-model atributo está presente.

Eles fornecem os dados de ligação, o que significa que eles são parte do modelo AngularJS, e pode ser referido, e atualizado, tanto em funções AngularJS e no DOM.

Eles fornecem validação. Exemplo: um <input> elemento com um required atributo, tem a $valid estado definido como false , enquanto ele está vazio.

Eles também fornecem o controle do Estado. AngularJS contém o estado atual de todos os elementos de entrada.

Os campos de entrada tem os seguintes estados:

  • $untouched O campo ainda não foi tocado
  • $touched O campo foi tocado
  • $pristine O campo ainda não foi modificado
  • $dirty O campo foi modificado
  • $invalid O conteúdo do campo não é válido
  • $valid o conteúdo do campo é válido

O valor de cada estado representa um valor booleano, e é ou true ou false .

Sintaxe

<input ng-model=" name ">

Os elementos de entrada estão a ser referido, utilizando o valor do ng-model atributo.

Classes CSS

<input> elementos dentro de uma aplicação AngularJS são dadas certas classes. Essas classes podem ser usados ​​para estilizar elementos de entrada de acordo com seu estado.

São adicionadas as seguintes classes:

  • ng-untouched O campo ainda não foi tocado
  • ng-touched O campo foi tocado
  • ng-pristine O campo ainda não foi modificado
  • ng-dirty O campo foi modificado
  • ng-valid o conteúdo do campo é válido
  • ng-invalid O conteúdo do campo não é válida
  • ng-valid- key Uma chave para cada validação. Exemplo: ng-valid-required , útil quando há mais do que uma coisa que deve ser validada
  • ng-invalid- key Exemplo: ng-invalid-required

As aulas são removidos se o valor que eles representam é false .

Exemplo

Aplicar estilos para elementos de entrada válidas e inválidas, utilizando CSS padrão:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Tente você mesmo "
❮ AngularJS Referência