Esempio
Un campo di input con associazione dati:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Prova tu stesso " Definizione e utilizzo
AngularJS modifica il comportamento predefinito di <input> elementi, ma solo se il ng-model attributo è presente.
Forniscono associazione dati, che significa che sono parte del modello AngularJS, e possono essere indicati, e aggiornati, sia nelle funzioni AngularJS e nel DOM.
Essi forniscono la convalida. Esempio: un <input> elemento con una required attributo ha il $valid stato impostato a false fintanto che è vuota.
Essi forniscono anche il controllo dello stato. AngularJS mantiene lo stato corrente di tutti gli elementi di input.
I campi di input sono i seguenti stati:
-
$untouchedIl campo non è stato ancora toccato -
$touchedIl campo è stato toccato -
$pristineIl campo non è stato ancora modificato -
$dirtyIl campo è stato modificato -
$invalidIl contenuto del campo non è valido -
$validIl contenuto del campo è valido
Il valore di ogni stato rappresenta un valore booleano, ed è sia true o false .
Sintassi
<input ng-model=" name "> Elementi di input vengono indicati con utilizzando il valore della ng-model attributo.
Le classi CSS
<input> elementi all'interno di un'applicazione AngularJS sono date certe classi. Queste classi possono essere utilizzati per lo stile elementi di ingresso in base al loro stato.
Vengono aggiunte le seguenti classi:
-
ng-untouchedIl campo non è stato ancora toccato -
ng-touchedIl campo è stato toccato -
ng-pristineIl campo non è stato ancora modificato -
ng-dirtyIl campo è stato modificato -
ng-validIl contenuto del campo è valido -
ng-invalidIl contenuto campo non è valida -
ng-valid- keyUna chiave per ogni convalida. Esempio:ng-valid-required, utile quando ci sono più di una cosa che deve essere convalidato -
ng-invalid- keyEsempio:ng-invalid-required
Le classi vengono rimossi se il valore che essi rappresentano è false .
Esempio
Applicare stili per gli elementi di input validi e non validi, usando CSS standard:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Prova tu stesso "