Angular.js ng-跨多个元素重复

这个问题在这里已经部分解决了: Angular.js ng-重复多次 tr & # 39; s

然而，这实际上只是一种解决方案，它并没有真正解决核心问题，即: 如何在没有包装器的情况下跨多个元素使用 n- 重复？

例如，jquery.Accordion 需要重复 h3和 div 元素，如何使用 ng-repeat 实现这一点呢？

56333 次浏览
小开

更新 : 此答案已过期。请参阅@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);
}
})

第二个选项是使用更新后的角度源代码，以启用注释样式 ngRepeat 指令(普林克)

<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>

小开
最佳答案

我们现在有一个适当的支持，请看:

AngularJ 承诺

通过这种改变，你现在可以做到:

<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>
小开

要回答 Andre 上面关于表中超过2个层次的 ng- 重复的问题，可以使用多个 ng- 重复-启动来完成。

<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>

下面是一个 混蛋的例子


提交答案