Angular.js ng-repeat 跨多个元素答案

【问题标题】：Angular.js ng-repeat across multiple elementsAngular.js ng-repeat 跨多个元素
【发布时间】：2013-05-29 19:11:03
【问题描述】：

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

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

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

【问题讨论】：

标签： javascript jquery angularjs angularjs-ng-repeat

【解决方案1】：

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

AngularJs Commmit

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

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

【讨论】：

如果它可以帮助其他人......这在 angularjs.org 网站上的 AngularJs 的稳定和不稳定版本中均不可用。为了让它工作，我必须安装最先进的 Angular.js - 操作方法在这里：stackoverflow.com/questions/17501052/…
正如@geoidesic 建议的那样，这在 1.1.5 之后登陆，所以在 1.1.6（或很可能是 1.2.0）中注意它
只需要添加 ng-repeat-start 属于当前（8 月 13 日）的不稳定版本
如果第二个本身是重复的“嵌套”怎么办？例如：
@Andre 不要那样做。而是在您的第一个 ng-repeat 中创建一个新指令。

【解决方案2】：

要回答 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>

这是一个plunker 示例

【讨论】：

试图完成这项工作，但我只得到：未终止的属性，找到'ng-repeat-start'但没有找到匹配的'ng-repeat-end'。这不再起作用了吗？使用角度 1.5

【解决方案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>

【讨论】：

听起来不错。虽然我一点都不懂！在你的第一个例子中，我没有看到 ng-repeat，所以我不确定它是如何相关的（我看了小提琴，但它太复杂了，我无法理解它的头部或尾部）。你的第二个例子对我来说只是 gobbledigook。
第一个示例没有解决问题，因为您仍然会在两个元素周围重复包装......即包含 ng-repeat 指令的元素也会重复 - 我只是想要要重复的内部元素。
@user2448430 不，你没有。 element.replaceWith(newElement); 将用你需要的替换包装标签。您也可以在指令中添加循环，并在 tmpl 中添加任意数量的标签。
我不同意。试了一下，它重复了包含 ng-repeat 指令的元素。第二个例子也没有实际工作。 div 不会重复，它只是在您的 plnkr 示例中输出的数组。
@JoshGough 确实如此，所以我最终将规则添加到我的 CSS 以隐藏这些跨度。