jQuery Angular.js ng-repeat 跨多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16900050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular.js ng-repeat across multiple elements
提问by geoidesic
This question has been partly addressed here: Angular.js ng-repeat across multiple tr's
这个问题在这里得到了部分解决：Angular.js ng-repeat cross multiple tr's
However that is just a work-around really, it doesn't actually address the core issue, which is: how can one use ng-repeat across multiple elements without a wrapper?
然而，这实际上只是一种解决方法，它实际上并没有解决核心问题，即：如何在没有包装器的情况下跨多个元素使用 ng-repeat？
For example, jquery.accordion requires you to repeat an h3 and div element, how could one do this with ng-repeat?
例如，jquery.accordion 要求您重复 h3 和 div 元素，如何使用 ng-repeat 做到这一点？
回答by Igor Minar
We now have a proper support for this, please see:
我们现在对此有适当的支持，请参阅：
AngularJs Commmit
AngularJs 提交
with this change you can now do:
通过此更改，您现在可以执行以下操作：
<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>
回答by hackfan
To answer Andre's question above on more than 2 levels of ng-repeat in a table, you can use multiple ng-repeat-start to accomplish this.
要在表中超过 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>
Here is a plunkerexample
这是一个plunker示例
回答by vittore
UPDATE: This answer is outdated. Please see @IgorMinar answer and use standard ng-repeat-startand ng-repeat-enddirectives.
更新：此答案已过时。请参阅@IgorMinar 答案并使用标准ng-repeat-start和ng-repeat-end指令。
There are two options:
有两种选择：
First option is to create directive that will render several tags and replace source tag (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);
}
})
Second option is to use updated source code of angular that enables comment style 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>
第一个选项是创建将呈现多个标签并替换源标签（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>
