AngularJS Directive ng-model

La directive ng-model est utilisée pour lier les données de l'application aux valeurs des contrôles HTML (input, select, textarea).

Directive ng-model

ng-modelLes directives peuvent lier les valeurs des champs de saisie aux variables créées par AngularJS.

Exemples AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
Nom :<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 »

Liaison bidirectionnelle

Liaison bidirectionnelle : lorsque la valeur du champ de saisie est modifiée, la valeur de la propriété AngularJS sera également modifiée :

Exemples AngularJS

<div ng-app="myApp" ng-controller="myCtrl">
Nom :<input ng-model="name">
    <h1>Vous avez saisi :{{name}}</h1>
</div>

Essayez-le vous-même »

Valider la saisie utilisateur

Exemples AngularJS

<form ng-app="" name="myForm">
    E-mail :
    <input type="email" name="myAddress" ng-model="text">
    <span ng-show="myForm.myAddress.$error.email">Adresse e-mail non valide</span>
</form>

Essayez-le vous-même »

Dans l'exemple ci-dessus, le message d'invite sera affichéng-showLa propriété renvoietruedans les conditions suivantes.

État appliqué

ng-modelLa directive peut fournir des valeurs d'état pour les données de l'application (invalid, dirty, touched, error) :

Exemples AngularJS

<form ng-app="" name="myForm" ng-init="myText = '[email protected]'"> E-mail : <input type="email" name="myAddress" ng-model="myText" required> <p>Modifiez l'adresse e-mail pour voir les changements d'état.</p> <h1>État</h1> <p>Valide : {{myForm.myAddress.$valid}} (vrai si la valeur saisie est valide).</p> <p>Modifié : {{myForm.myAddress.$dirty}} (vrai si la valeur a changé).</p> <p>Touché : {{myForm.myAddress.$touched}} (vrai si cliqué via un écran tactile).</p>

Essayez-le vous-même »

Classes CSS

ng-modelLes directives fournissent des classes CSS aux éléments HTML en fonction de leur état :

Exemples AngularJS

<style>
input.ng-invalid {
    background-color: lightblue;
}
</style>
<body>

<form ng-app="" name="myForm">
Entrez votre nom :
    <input name="myAddress" ng-model="text" required>
</form>

Essayez-le vous-même »

ng-modelLes directives ajoutent/suppriment les classes suivantes en fonction de l'état des champs du formulaire :

  • ng-empty
  • ng-not-empty
  • ng-touched
  • ng-untouched
  • ng-valid
  • ng-invalid
  • ng-dirty
  • ng-pending
  • ng-pristine
autres extensions