Syntaxe
<element ng-repeat="expression"></element>
|
Paramètres
Nom |
Description |
element |
Ce paramètre permet d'indiquer une balise. |
expression |
Ce paramètre permet d'indiquer une expression spécifiant comme effectuer une boucle sur la collection ou la liste. |
Description
Cette directive permet de fixer un gabarit pour données dans une collection.
Remarques
- Fonctionnement général : La directive ng-repeat est utilisée pour itérer sur une collection, comme un tableau ou un objet, afin de générer des éléments
HTML pour chaque item. Elle permet de répéter un élément ou un groupe d'éléments pour chaque élément de la collection, ce qui rend
les vues dynamiques en fonction des données du modèle.
- Syntaxe : La syntaxe d'utilisation de ng-repeat est la suivante : ng-repeat="item in items". Ici, items est la collection sur laquelle itérer, et
item représente l'élément actuel dans chaque itération. Cette directive génère un nouvel élément du DOM pour chaque élément de la
collection.
- Performances : Lorsque vous utilisez ng-repeat avec de grandes collections, il est important de tenir compte des performances. AngularJS crée un
nouvel élément DOM pour chaque item, et cela peut devenir coûteux si la collection est volumineuse. L'utilisation de la pagination
ou du "virtual scrolling" peut aider à optimiser le rendu.
- Utilisation avec des objets : ng-repeat peut également être utilisé pour itérer sur des objets, ce qui permet de générer une liste d'éléments pour chaque paire
clef-valeur. La syntaxe pour itérer sur un objet est : ng-repeat="(key, value) in object". Cela est utile pour afficher des paires de données où chaque élément est une
clef associée à une valeur.
- Filtrage et tri : AngularJS permet d'ajouter des filtres à ng-repeat, comme filter ou orderBy, directement dans la directive. Par
exemple, ng-repeat="item in items | filter:searchText | orderBy:'name'" permet d'afficher une liste filtrée et triée selon des critères définis par l'utilisateur.
- Accès aux index : Lors de l'itération sur une collection, vous pouvez accéder à l'index de l'élément actuel en utilisant la variable $index. Par exemple,
ng-repeat="item in items track by $index" permet de suivre l'index de chaque élément de la collection, ce qui est utile pour des optimisations de performance ou pour
afficher des informations spécifiques à chaque élément (comme son positionnement).
- Optimisation avec track by : Par défaut, AngularJS compare les éléments de la collection par référence pour déterminer si un élément a changé. Pour optimiser
cela, surtout avec de grandes collections, vous pouvez utiliser track by pour spécifier un identifiant unique (souvent une clé) pour chaque élément, ce qui permet à AngularJS de
gérer plus efficacement les changements dans le DOM.
- Comportement des sous-éléments : Chaque itération générée par ng-repeat est une nouvel étendue dans AngularJS. Cela signifie que vous pouvez définir
des expressions et des variables spécifiques à chaque itération. Cela peut être particulièrement utile pour lier des données à des éléments spécifiques, comme dans le cas de
formulaires dynamiques où chaque ligne représente un ensemble de champs à gérer indépendamment.
Dernière mise à jour : Dimanche, le 9 décembre 2018