关于javascript：Angular.js ng-repeat跨多个元素


Angular.js ng-repeat across multiple elements

此问题已在此处部分解决：跨多个tr的Angular.js ng-repeat

但是，这实际上只是一个变通办法，实际上并不能解决核心问题，即：如何在没有包装的情况下跨多个元素使用ng-repeat？

例如，jquery.accordion要求您重复一个h3和div元素，那么用ng-repeat怎么做？

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

AngularJs提交

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

1
2
3
4
5
6
7
8
<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>
相关讨论

要在一个表中的两个以上ng-repeat级别上回答上述安德烈的问题，可以使用多个ng-repeat-start来完成此操作。

1
2
3
4
5
6
7
8
9
10
11
<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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 +='another div'
       }

       var newElement = angular.element(tmpl);
       $compile(newElement)(scope);
       element.replaceWith(newElement);
    }
})

第二种选择是使用angular的更新源代码，该代码启用注释样式ngRepeat指令(plnkr)

1
2
3
4
5
6
7
8
9
10
11
<body ng-controller="MainCtrl">
 
   <!-- directive: ng-repeat i in arr -->
     {{i}}
     {{ 'foo' }}  
   <!-- /ng-repeat -->

   {{ arr }}

  add
</body>

相关讨论