Cette question a été partiellement abordée ici : Angular.js ng-repeat sur plusieurs trs
Cependant, il ne s'agit que d'une solution de rechange, qui ne répond pas au problème de fond, à savoir : comment utiliser ng-repeat sur plusieurs éléments sans wrapper ?
Par exemple, jquery.accordion vous demande de répéter un élément h3 et div, comment pourrait-on faire cela avec ng-repeat ?
Nous avons maintenant un support approprié pour cela, veuillez voir :
https://github.com/angular/angular.js/commit/e46100f7097d9a8f174bdb9e15d4c6098395c3f2
avec ce changement, vous pouvez maintenant faire :
<table>
<tr ng-repeat-start="item in list">
<td>I get repeated</td>
</tr>
<tr ng-repeat-end>
<td>I also get repeated</td>
</tr>
</table>
Pour répondre à la question d'André concernant la présence de plus de deux niveaux de ng-repeat dans un tableau, vous pouvez utiliser plusieurs ng-repeat-start.
<tr ng-repeat-start="items in list">
<td>{{items.title}}</td>
</tr>
<tr ng-repeat-start="item in items">
<td>{{item.subtitle}}</td>
</tr>
<tr ng-repeat-end ng-repeat="value in item.values">
<td>{{value.col1}}</td>
<td>{{value.col2}}</td>
</tr>
<tr ng-repeat-end></tr>Voici un plunker exemple
Il existe deux options :
La première option consiste à créer une directive qui rendra plusieurs balises et remplacera la balise source ( jsfiddle )
<div multi ></div>
angular.module('components').directive('multi', function ($compile) {
return {
restrict: 'A',
scope : {
first : '=',
last : '=',
},
terminal:true,
link: function (scope, element, attrs) {
var tmpl = '', arr = [0,1,2,3]
// this is instead of your repeater
for (var i in arr) {
tmpl +='<div>another div</div>'
}
var newElement = angular.element(tmpl);
$compile(newElement)(scope);
element.replaceWith(newElement);
}
})La deuxième option est d'utiliser le code source mis à jour d'angular qui permet la directive ngRepeat de style commentaire ( plnkr )
<body ng-controller="MainCtrl">
<div ng-init="arr=[0,1,2]" ></div>
<!-- directive: ng-repeat i in arr -->
<div>{{i}}</div>
<div>{{ 'foo' }}</div>
<!-- /ng-repeat -->
{{ arr }}
<div ng-click="arr.push(arr.length)">add</div>
</body> Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
