AngularJS je m'y mets !

Les liaisons

Nous allons maintenant introduire un peu d'interaction à nos pages. Imaginez que vous entrez une valeur dans une zone de texte et que cette valeur est utilisée en temps réel pour modifier le DOM. C'est ce que nous allons réaliser à présent.

Directive ngModel

La directive ngModel permet de créer une liaison avec une zone de saisie. Voici un exemple :

<div ng-app>
	<input id="nom" type="text" ng-model="nom" placeholder="Entrez votre nom ici">
	<h1>Bonjour {{nom}} !</h1>
</div>

Bonjour {{nom}} !

Avec la directive ngModel on a fait une liaison entre la zone de texte et une variable située dans le modèle (en fait le scope comme nous le verrons bientôt) qui a le même nom que celui prévu pour la directive. Autrement dit il est créé une variable nom dans le modèle. L'expression située dans la balise h1 est liée à cette variable et affiche sa valeur et se raffraichit dès que celle-ci change. Au final l'expression est mise à jour instantanément lorsque la valeur de la zone de texte est modifiée.

Suivant

Retour à l'accueil...