Angular.js ng-repeat 跨多个元素

IT技术 javascript jquery angularjs angularjs-ng-repeat
2021-03-08 15:52:40

这个问题在这里得到了部分解决:Angular.js ng-repeat cross multiple tr's

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

例如,jquery.accordion 要求您重复 h3 和 div 元素,如何使用 ng-repeat 做到这一点?

3个回答

我们现在对此有适当的支持,请参阅:

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>
@Andre 不要那样做。而是在您的第一个 ng-repeat 中创建一个新指令。
2021-04-24 15:52:40
正如@geoidesic 所暗示的,这在 1.1.5 之后登陆,所以在 1.1.6(或很可能是 1.2.0)中注意它
2021-05-03 15:52:40
如果第二个 <tr> 本身是一个重复的“嵌套”怎么办?例如:<tr ng-repeat-start=".."></tr><tr ng-repeat="somethingelse" nt-repeat-stop></tr>
2021-05-06 15:52:40
只需要补充说 ng-repeat-start 目前属于不稳定版本(8 月 13 日)
2021-05-10 15:52:40
如果它对其他人有帮助......这在 angularjs.org 网站上的 AngularJs 的稳定版或不稳定版中均不可用。为了让这个工作,我必须安装 Angular.js 的前沿 - 操作方法在这里:stackoverflow.com/questions/17501052/...
2021-05-20 15:52:40

要在表中超过 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
2021-05-16 15:52:40

更新:此答案已过时。请参阅@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,所以我不确定它是如何相关的(我看了小提琴,但它太复杂了,我无法理解它)。你的第二个例子对我来说只是gobbledigook。
2021-04-23 15:52:40
@JoshGough 确实如此,所以我最终将规则添加到我的 css 中以隐藏这些跨度。
2021-04-26 15:52:40
第一个例子没有解决这个问题,因为你最终还是在两个元素周围有一个重复的包装器......即包含 ng-repeat 指令的元素也被重复了——我只想重复内部元素。
2021-04-30 15:52:40
我不同意。试过了,它重复包含 ng-repeat 指令的元素。此外,第二个示例实际上不起作用。div 不重复,它只是在您的 plnkr 示例中输出的数组。
2021-05-09 15:52:40
@ user2448430 不,你没有。element.replaceWith(newElement);将用你需要的东西替换包装标签。您也可以在指令中使用循环,并根据需要将尽可能多的标签添加到 tmpl 中。
2021-05-21 15:52:40