it-swarm.com.de

Angular.js ng-repeat über mehrere Elemente hinweg

Diese Frage wurde hier teilweise angesprochen: Angular.js ng-repeat across multiple tr's

Dies ist jedoch nur eine Umgehung des Problems. Es geht nicht wirklich um das Kernproblem: Wie kann man ng-repeat über mehrere Elemente hinweg ohne Wrapper verwenden?

In jquery.accordion müssen Sie beispielsweise ein h3- und ein div-Element wiederholen. Wie kann man dies mit ng-repeat tun?

83
geoidesic

Wir haben jetzt eine angemessene Unterstützung dafür, bitte sehen Sie:

AngularJs Commit

mit dieser Änderung können Sie jetzt Folgendes tun:

<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>
157
Igor Minar

Um die obige Frage von Andre zu mehr als 2 Ebenen von ng-repeat in einer Tabelle zu beantworten, können Sie mehrere ng-repeat-start verwenden, um dies zu erreichen.

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

Hier ist ein Plunker Beispiel

21
hackfan

[~ # ~] Update [~ # ~] : Diese Antwort ist veraltet. Bitte siehe @IgorMinar Antwort und benutze Standard ng-repeat-start und ng-repeat-end Anweisungen.


Es gibt zwei Möglichkeiten:

Die erste Möglichkeit besteht darin, eine Direktive zu erstellen, die mehrere Tags rendert und das Quell-Tag ersetzt ( 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); 
    }
})

Die zweite Möglichkeit besteht darin, den aktualisierten Quellcode von angular, der die Anweisung ngRepeat im Kommentarstil aktiviert ( plnkr ) zu verwenden.

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