Esta pregunta se ha abordado en parte aquí: Angular.js ng-repeat en múltiples tr's
Sin embargo, eso es solo una solución alternativa, en realidad no aborda el problema central, que es: ¿cómo se puede usar ng-repeat en múltiples elementos sin un contenedor?
Por ejemplo, jquery.accordion requiere que repitas un elemento h3 y div, ¿cómo podría uno hacer esto con ng-repeat?
Respuestas:
Ahora tenemos un soporte adecuado para esto, consulte:
con este cambio ahora puedes hacer:
<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>
Para responder la pregunta de Andre anterior en más de 2 niveles de ng-repeat en una tabla, puede usar múltiples ng-repeat-start para lograr esto.
<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>
Aquí hay un ejemplo de plunker
ACTUALIZACIÓN : Esta respuesta está desactualizada. Consulte la respuesta de @IgorMinar y utilice directivas ng-repeat-starty estándares ng-repeat-end.
Hay dos opciones:
La primera opción es crear una directiva que renderice varias etiquetas y reemplace la etiqueta fuente ( 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 segunda opción es usar el código fuente actualizado de angular que habilita el estilo de comentario ngRepeat directive ( 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>
element.replaceWith(newElement);reemplazará la etiqueta de envoltura con lo que necesita. también puede tener un bucle en su directiva y agregar tantas etiquetas como necesite en tmpl.