角。js在多个元素之间重复。

时间：2021-11-09 03:47:09

This question has been partly addressed here: Angular.js ng-repeat across multiple tr's

这个问题在这里已经部分地讨论过了:角度。跨越多个tr进行js ng-repeat

However that is just a work-around really, it doesn't actually address the core issue, which is: how can one use ng-repeat across multiple elements without a wrapper?

然而，这只是一个解决方案，实际上它并没有解决核心问题，即:如果没有包装器，如何跨多个元素使用ng-repeat ?

For example, jquery.accordion requires you to repeat an h3 and div element, how could one do this with ng-repeat?

例如,jquery。手风琴需要您重复h3和div元素，如何使用ng-repeat来实现这一点呢?

3 个解决方案

#1

153  

We now have a proper support for this, please see:

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

AngularJs Commmit

with this change you can now do:

有了这些改变，你现在可以做:

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

#2

19  

To answer Andre's question above on more than 2 levels of ng-repeat in a table, you can use multiple ng-repeat-start to accomplish this.

要在一个g-repeat表中回答以上Andre的问题，您可以使用多个n重复性-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>

Here is a plunker example

这是一个柱塞例子

#3

3  

UPDATE: This answer is outdated. Please see @IgorMinar answer and use standard ng-repeat-start and ng-repeat-end directives.

更新:这个答案已经过时了。请参见@IgorMinar回答并使用标准的ng-repeat-start和ng-repeat-end指令。

There are two options:

有两个选择:

First option is to create directive that will render several tags and replace source tag (jsfiddle)

第一个选项是创建指示，它将呈现多个标记并替换源标记(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); 
    }
})

Second option is to use updated source code of angular that enables comment style ngRepeat directive (plnkr)

第二种选择是使用更新后的具有角度的源代码来支持注释样式的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>

#1

153  

We now have a proper support for this, please see:

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

AngularJs Commmit

with this change you can now do:

有了这些改变，你现在可以做:

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

#2

19  

To answer Andre's question above on more than 2 levels of ng-repeat in a table, you can use multiple ng-repeat-start to accomplish this.

要在一个g-repeat表中回答以上Andre的问题，您可以使用多个n重复性-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>

Here is a plunker example

这是一个柱塞例子

#3

3  

UPDATE: This answer is outdated. Please see @IgorMinar answer and use standard ng-repeat-start and ng-repeat-end directives.

更新:这个答案已经过时了。请参见@IgorMinar回答并使用标准的ng-repeat-start和ng-repeat-end指令。

There are two options:

有两个选择:

First option is to create directive that will render several tags and replace source tag (jsfiddle)

第一个选项是创建指示，它将呈现多个标记并替换源标记(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); 
    }
})

Second option is to use updated source code of angular that enables comment style ngRepeat directive (plnkr)

第二种选择是使用更新后的具有角度的源代码来支持注释样式的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>

标签：

相关文章