83

这个问题已部分解决：Angular.js ng-repeat across multiple tr's

然而，这实际上只是一种解决方法，它实际上并没有解决核心问题，即：如何在没有包装器的情况下跨多个元素使用 ng-repeat？

例如，jquery.accordion 要求你重复一个 h3 和 div 元素，用 ng-repeat 怎么能做到这一点？

4

3 回答 3

159

我们现在对此有适当的支持，请参阅：

AngularJs 提交

通过此更改，您现在可以执行以下操作：

<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>
于 2013-06-04T22:49:30.680 回答
22

要回答 Andre 关于表格中超过 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>

这是一个笨拙的例子

于 2014-05-16T15:28:55.623 回答
3

更新：这个答案已经过时了。请参阅@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>

于 2013-06-03T15:22:04.650 回答