AngularJS

Ng-repeat

A l'instar de Jquery qui modifie le DOM depuis des fonctions javascript, angularJS permet de faire une boucle directement depuis le DOM.

Pour ce faire, il faut d'abord créer dans le controller un contenant d'élément (array, json...) sur lequel boucler.

  1. angular.module('myApp').controller('boucler',['$scope',function($scope){
  2. $scope.tableau = ['Element1','Element2','Element3','Element4'];
  3. }]);

Comme vu plus haut, la boucle se fait directement dans le HTML avec l'attribut ng-repeat.

  1. <ul>
  2. <li ng-repeat="element in tableau">{{element}}</li>
  3. </ul>

Il est également possible d'inscrire ces éléments dans un champ texte avec l'attribut ng-model.

  1. <p ng-repeat="element in tableau">
  2. <input type="text" ng-model="element">
  3. </p>

Exemples

ng-repeat dans une liste :

  • Element1
  • Element2
  • Element3
  • Element4

ng-repeat avec affichage des résultats dans des champs texte :