Câu hỏi này đã được giải đáp một phần ở đây: Angular.js ng-repeat over multiple tr
Tuy nhiên, đó chỉ là một công việc thực sự, nó không thực sự giải quyết vấn đề cốt lõi, đó là: làm thế nào người ta có thể sử dụng ng-repeat trên nhiều phần tử mà không có trình bao bọc?
Ví dụ: jquery.accordion yêu cầu bạn lặp lại phần tử h3 và div, làm thế nào người ta có thể thực hiện điều này với ng-repeat?
Câu trả lời:
Chúng tôi hiện có một hỗ trợ thích hợp cho việc này, vui lòng xem:
với thay đổi này bây giờ bạn có thể làm:
<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>
Để trả lời câu hỏi của Andre ở trên về hơn 2 cấp độ ng-repeat trong một bảng, bạn có thể sử dụng nhiều ng-repeat-start để thực hiện điều này.
<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>
Đây là một ví dụ về plunker
CẬP NHẬT : Câu trả lời này đã lỗi thời. Vui lòng xem câu trả lời của @IgorMinar và sử dụng tiêu chuẩn ng-repeat-startvà ng-repeat-endchỉ thị.
Có hai lựa chọn:
Tùy chọn đầu tiên là tạo chỉ thị sẽ hiển thị một số thẻ và thay thế thẻ nguồn ( 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);
}
})
Tùy chọn thứ hai là sử dụng mã nguồn được cập nhật của góc cho phép kiểu bình luận ngRepeat chỉ thị ( 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);sẽ thay thế thẻ wrapper bằng những gì bạn cần. Ngoài ra, bạn có thể có vòng lặp trong chỉ thị của mình và thêm nhiều thẻ tùy ý vào tmpl.