Je voudrais également mentionner une nouvelle fonctionnalité d' AngularJSng-repeat
, à savoir les points de début et de fin de répétition spéciaux . Cette fonctionnalité a été ajoutée afin de répéter une série d'éléments HTML au lieu d'un seul élément HTML parent.
Pour utiliser les points de début et de fin du répéteur, vous devez les définir en utilisant respectivement les directives ng-repeat-start
et ng-repeat-end
.
La ng-repeat-start
directive fonctionne de manière très similaire à la ng-repeat
directive. La différence est qu'il répète tous les éléments HTML (y compris la balise sur laquelle il est défini) jusqu'à la balise HTML de fin où ng-repeat-end
est placé (y compris la balise avec ng-repeat-end
).
Exemple de code (provenant d'un contrôleur):
// ...
$scope.users = {};
$scope.users["182982"] = {name:"John", age: 30};
$scope.users["198784"] = {name:"Antonio", age: 32};
$scope.users["119827"] = {name:"Stephan", age: 18};
// ...
Exemple de modèle HTML:
<div ng-repeat-start="(id, user) in users">
==== User details ====
</div>
<div>
<span>{{$index+1}}. </span>
<strong>{{id}} </strong>
<span class="name">{{user.name}} </span>
<span class="age">({{user.age}})</span>
</div>
<div ng-if="!$first">
<img src="/some_image.jpg" alt="some img" title="some img" />
</div>
<div ng-repeat-end>
======================
</div>
La sortie ressemblerait à la suivante (selon le style HTML):
==== User details ====
1. 119827 Stephan (18)
======================
==== User details ====
2. 182982 John (30)
[sample image goes here]
======================
==== User details ====
3. 198784 Antonio (32)
[sample image goes here]
======================
Comme vous pouvez le voir, ng-repeat-start
répète tous les éléments HTML (y compris l'élément avec ng-repeat-start
). Toutes ng-repeat
les propriétés spéciales (dans ce cas $first
et $index
) fonctionnent également comme prévu.