[英]Angular.js ng-repeat across multiple elements
这个问题在这里得到了部分解决: 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级别的Andre的问题,您可以使用多个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); } })
第二个选项是使用更新的角度源代码,启用注释样式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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.