Los últimos tutoriales de desarrollo web
 

AngularJS Directiva de entrada

❮ AngularJS Referencia

Ejemplo

Un campo de entrada de datos con vinculante:

<input ng-model="myInput">

<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Inténtalo tú mismo "

Definición y Uso

AngularJS modifica el comportamiento predeterminado de <input> elementos, pero sólo si el ng-model atributo está presente.

Proporcionan enlace de datos, lo que significa que son parte del modelo AngularJS, y se puede hacer referencia a, y actualizados, tanto en funciones AngularJS y en el DOM.

Ellos proporcionan una validación. Ejemplo: un <input> elemento con un required atributo, tiene la $valid Estado establecido en false , siempre y cuando esté vacío.

También proporcionan el control del Estado. AngularJS mantiene el estado actual de todos los elementos de entrada.

Los campos de entrada tienen los siguientes estados:

  • $untouched El campo no se ha tocado todavía
  • $touched El campo ha sido tocado
  • $pristine El campo no se ha modificado todavía
  • $dirty El campo ha sido modificado
  • $invalid El contenido del campo no es válido
  • $valid El contenido del campo es válida

El valor de cada estado representa un valor booleano, y de que sea true o false .

Sintaxis

<input ng-model=" name ">

Los elementos de entrada se hace referencia mediante el valor de la ng-model atributo.

Las clases CSS

<input> elementos dentro de una aplicación AngularJS se dan ciertas clases. Estas clases pueden utilizarse con el estilo de los elementos de entrada en función de su estado.

Se añaden las siguientes clases:

  • ng-untouched El campo no se ha tocado todavía
  • ng-touched El campo ha sido tocado
  • ng-pristine El campo no se ha modificado todavía
  • ng-dirty El campo ha sido modificado
  • ng-valid El contenido del campo es válida
  • ng-invalid El contenido del campo no es válida
  • ng-valid- key Una de las claves para cada validación. Ejemplo: ng-valid-required , útil cuando hay más de una cosa que debe ser validada
  • ng-invalid- key Ejemplo: ng-invalid-required

Las clases se eliminan si el valor que representan es false .

Ejemplo

Aplicar estilos de elementos de entrada válidas y no válidas, el uso de CSS estándar:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Inténtalo tú mismo "
❮ AngularJS Referencia