logo标签列表

Angular.js在多个元素中重复ng-repeat

javascriptjqueryangularjsangularjs-ng-repeat
83
这个问题在这里已经部分得到了解决：Angular.js ng-repeat across multiple tr's 然而，那只是一个变通方法，它并没有真正解决核心问题，即如何在没有包装器的情况下跨多个元素使用ng-repeat？
例如，jquery.accordion要求您重复h3和div元素，如何使用ng-repeat实现这一点？
3个回答
159

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

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>
1
如果有助于其他人...这在angularjs.org网站的稳定版和不稳定版中都不可用。为了使其工作，我必须安装Angular.js的最新版本 - 如何操作请参见此处：http://stackoverflow.com/questions/17501052/how-can-i-get-a-bleeding-edge-version-of-angular-js-from-github - geoidesic
3
正如 @geoidesic 所建议的，这个已经在1.1.5版本之后发布了，所以请注意在1.1.6（或很可能是1.2.0）中查看它。 - Anson
1
只需补充一点，ng-repeat-start目前属于不稳定版本（截至8月13日）。 - bresleveloper
1
如果第二个<tr>本身是一个“嵌套”的重复项呢？例如：<tr ng-repeat-start=".."></tr><tr ng-repeat="somethingelse" nt-repeat-stop></tr> - Andre
@Andre 不要那样做。最好在你的第一个ng-repeat中创建一个新指令。 - geoidesic
22

回答Andre在上面提出的有关表格中多个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'。这不再起作用吗？使用angular 1.5 - stibay
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指令的元素。而且第二个例子实际上并没有工作。在你的plnkr示例中，div并没有被重复，只是数组被输出了。 - geoidesic
1
@JoshGough 是的，所以我最终在我的CSS中添加了规则来隐藏那些span。 - vittore
@bresleveloper，你来晚了，Angular已经在主分支中包含了ng-repeat-start和ng-repeat-end，所以现在更容易了。 - vittore
谢谢，维托尔，但是目前老板们不希望使用不稳定的版本，所以我只能等待。顺便说一下，我在使用replaceWith时遇到了问题，看起来是一个jQuery的问题而不是Angular的问题，我将其替换为空/追加。 - bresleveloper
@bresleveloper 嗯，它已经稳定了相当长的一段时间了。 - vittore
显示剩余5条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接