Exemple
Un champ de saisie avec la liaison de données:
<input ng-model="myInput">
<p>The value of the input field is:</p>
<h1>{{myInput}}</h1>
Essayez - le vous - même » Définition et utilisation
AngularJS modifie le comportement par défaut de <input>
éléments, mais seulement si le ng-model
attribut est présent.
Ils fournissent des données de liaison, ce qui signifie qu'ils font partie du modèle AngularJS, et peuvent être appelés, et mis à jour, à la fois dans les fonctions de AngularJS et dans les DOM.
Ils fournissent une validation. Exemple: un <input>
élément avec un required
attribut, a $valid
état mis à false
tant qu'il est vide.
Ils assurent également le contrôle de l'Etat. AngularJS tient l'état actuel de tous les éléments d'entrée.
Les champs d'entrée ont les états suivants:
-
$untouched
Le champ n'a pas encore été touché -
$touched
Le champ a été touché -
$pristine
Le champ n'a pas encore été modifié -
$dirty
Le champ a été modifié -
$invalid
Le contenu du champ est pas valide -
$valid
Le contenu du champ est valide
La valeur de chaque état représente une valeur booléenne, et est soit true
ou false
.
Syntaxe
<input ng-model=" name ">
Éléments d'entrée sont désignés en utilisant la valeur du ng-model
attribut.
Classes CSS
<input>
éléments à l' intérieur d' une application AngularJS sont donnés certaines classes. Ces classes peuvent être utilisées pour le style des éléments d'entrée en fonction de leur état.
Les classes suivantes sont ajoutées:
-
ng-untouched
Le champ n'a pas encore été touché -
ng-touched
Le champ a été touché -
ng-pristine
Le champ n'a pas encore été modifié -
ng-dirty
Le champ a été modifié -
ng-valid
Le contenu du champ est valide -
ng-invalid
Le contenu du champ est pas valide -
ng-valid- key
Une clé pour chaque validation. Exemple:ng-valid-required
, utile quand il y a plus d'une chose qui doit être validée -
ng-invalid- key
Exemple:ng-invalid-required
Les classes sont supprimées si la valeur qu'ils représentent est false
.
Exemple
Appliquer des styles pour les éléments d'entrée valides et non valides, en utilisant la norme CSS:
<style>
input.ng-invalid {
background-color: pink;
}
input.ng-valid {
background-color: lightgreen;
}
</style>
Essayez - le vous - même »