javascript - Angular.js ng-repeat en múltiples elementos
jquery angularjs (3)
Esta pregunta se ha abordado en parte aquí: Angular.js ng-repeat en varios tr
Sin embargo, eso es solo una solución, 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 repita un elemento h3 y div, ¿cómo podría uno hacer esto con ng-repeat?
Ahora tenemos un soporte adecuado para esto, por favor mira:
Commmit AngularJs
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 a la pregunta anterior de Andre sobre 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 @IgorMinar answer y utilice las directivas estándar ng-repeat-start y ng-repeat-end .
Hay dos opciones:
La primera opción es crear una directiva que represente 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>