跨多个元素的Angular.js ng-repeat


Answers:


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>

1
万一它对别人有帮助...在angularjs.org网站上,无论是稳定版本还是不稳定版本的AngularJs都不提供此功能。为了得到这个工作,我只好装Angular.js的出血边缘-该怎么到这里:stackoverflow.com/questions/17501052/...
geoidesic

3
正如@geoidesic所建议的那样,它在1.1.5之后着陆,因此请在1.1.6(或者很可能是1.2.0)中注意
Anson 2013年

1
只需添加ng-repeat-start当前属于不稳定版本(aug 13)
bresleveloper 2013年

1
如果第二个<tr>本身是重复的“嵌套”怎么办?例如:<tr ng-repeat-start =“ ..”> </ tr> <tr ng-repeat =“ somethingelse” nt-repeat-stop> </ tr>
Andre

@安德烈不要那样。而是在您的第一个ng-repeat中创建一个新指令。
geodesic

22

要在一个表中的两个以上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>

这是一个例子


尝试进行这项工作,但我只得到:未终止的属性,找到了“ ng-repeat-start”,但没有找到匹配的“ ng-repeat-end”。这不再有效吗?使用angular 1.5
stibay '16

3

更新:此答案已过时。请参阅@IgorMinar答案并使用标准ng-repeat-startng-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,因此不确定它的相关性(我看了小提琴,但它是如此复杂,我无法做出任何改变。)您的第二个例子对我来说只是个傻瓜。
geoidesic 2013年

第一个示例无法解决问题,因为您仍然会在两个元素周围得到一个重复的包装器,即包含ng-repeat指令的元素也被重复了–我只想重复内部元素。
geodesic 2013年

@ user2448430不,你不知道。element.replaceWith(newElement);将用您需要的包装标签替换。您也可以在指令中加入循环,并在tmpl中添加所需数量的标签。
vittore

我不同意。对其进行了尝试,并重复了包含ng-repeat指令的元素。同样,第二个示例实际上并不起作用。div不再重复,只是在plnkr示例中输出的数组。
geoidesic

1
@JoshGough可以,所以我最终在CSS中添加了规则以隐藏这些跨度。
vittore
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.