AngularJS

Data binding

Depuis un champ text

AngularJS nous permet d'afficher le contenu d'un champ de formulaire dans un autre élément HTML en temps réel.

Pour commencer, il faut créer un champ text avec un attribut ng-model.

  1. <input type="search" ng-model="text">

Ensuite, insérer la balise angularJS contenant le ng-model du champ dans un élément HTML comme un paragraphe.

  1. <p>
  2. Votre texte inscrit : {{text}}
  3. </p>

Et voilà le tour est joué !

Depuis un controller

Il existe une deuxième possibilité d'afficher du texte par le biais de la balise angularJS.
Cette deuxième méthode utilise le controller et le $scope.

Commençons par la partie HTML.
Il faut ajouter le controller sur l'élément qui affichera le contenu puis ajouter la balise angularJS qui sera remplacé par le contenu.

  1. <div ng-controller="afficheTexte">
  2. {{text}}
  3. </div>

Une fois la partie HTML terminée, il nous faut remplir le contenu dans le controller.
Pour ce faire, il faut ajouter la valeur dans le $scope.

  1. angular.module('myapp').controller('afficheTexte',['$scope',function($scope){
  2. $scope.text = "hello world !";
  3. ]});

Exemple

Votre texte inscrit :