Це питання було частково розглянуто тут: Angular.js ng-repeat у кількох tr
Однак це насправді лише навколо роботи, насправді це не стосується основної проблеми, а саме: як можна використовувати ng-repeat у кількох елементах без обгортки?
Наприклад, jquery.accordion вимагає повторити елемент h3 та div, як це можна зробити за допомогою ng-repeat?
Відповіді:
Зараз ми маємо належну підтримку для цього, перегляньте:
за допомогою цієї зміни ви тепер можете зробити:
<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>
Щоб відповісти на вищезазначене питання Андре на більш ніж 2 рівнях ng-repeat у таблиці, ви можете використати кілька 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>
Ось приклад плюнка
ОНОВЛЕННЯ : Ця відповідь застаріла. Будь ласка, перегляньте відповідь @IgorMinar та використовуйте стандарт ng-repeat-startта ng-repeat-endдирективи.
Є два варіанти:
Перший варіант - створити директиву, яка буде відображати кілька тегів і замінювати вихідний тег ( 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);
}
})
Другий варіант - використовувати оновлений вихідний код angular, що включає директиву стилю коментарів ngRepeat ( 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);замінить тег обгортки тим, що вам потрібно. також ви можете мати цикл у своїй директиві та додати стільки тегів, скільки вам потрібно в tmpl.