La directive ng-modèle lie la valeur des contrôles HTML (entrée, sélectionnez, textarea) pour les données d'application.
La directive ng-modèle
Avec le ng-model directive vous pouvez lier la valeur d'un champ de saisie à une variable créée en AngularJS.
Exemple
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script> Essayez - le vous - même » Two-Way Reliure
La liaison va dans les deux sens. Si l'utilisateur modifie la valeur dans le champ de saisie, la propriété AngularJS va aussi changer sa valeur:
Exemple
<div ng-app="myApp" ng-controller="myCtrl">
Name:
<input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
Essayez - le vous - même » Valider l'entrée utilisateur
Le ng-model directive peut fournir le type de validation des données d'application (nombre, e-mail, nécessaire):
Exemple
<form ng-app="" name="myForm">
Email:
<input type="email" name="myAddress" ng-model="text">
<span ng-show="myForm.myAddress.$error.email">Not a valid e-mail
address</span>
</form>
Essayez - le vous - même » Dans l'exemple ci - dessus, la durée sera affichée que si l'expression dans le ng-show attribut retourne true .
 | Si la propriété dans le ng-model attribut n'existe pas, AngularJS va créer un pour vous. |
|---|
État de la candidature
Le ng-model directive peut fournir l' état des données d'application (invalide, sale, touché, erreur):
Exemple
<form ng-app="" name="myForm" ng-init="myText = '[email protected]'">
Email:
<input type="email" name="myAddress" ng-model="myText"
required>
<h1>Status</h1>
{{myForm.myAddress.$valid}}
{{myForm.myAddress.$dirty}}
{{myForm.myAddress.$touched}}
</form>
Essayez - le vous - même » Classes CSS
Le ng-model directive fournit des classes CSS pour les éléments HTML, en fonction de leur statut:
Exemple
<style>
input.ng-invalid {
background-color:
lightblue;
}
</style>
<body>
<form ng-app="" name="myForm">
Enter your name:
<input name="myAddress" ng-model="text" required>
</form>
Essayez - le vous - même » Le ng-model directive ajoute / supprime les classes suivantes, selon l'état du champ de formulaire:
- ng-vide
- ng-not-vide
- ng-touché
- ng-épargnée
- ng valide
- ng-invalide
- ng-sale
- ng pendante
- ng-vierge