Angular.js ng-repeat über mehrere Elemente hinweg

83

Diese Frage wurde hier teilweise angesprochen: Angular.js ng-repeat über mehrere trs

Dies ist jedoch nur eine Umgehung, die das Kernproblem nicht wirklich anspricht: Wie kann man ng-repeat ohne Wrapper über mehrere Elemente hinweg verwenden?

Zum Beispiel erfordert jquery.accordion, dass Sie ein h3- und ein div-Element wiederholen. Wie kann man dies mit ng-repeat tun?

javascript jquery angularjs angularjs-ng-repeat geoidesic
quelle

Antworten:

159

Wir haben jetzt eine angemessene Unterstützung dafür, siehe:

AngularJs Commmit

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>
Igor Minar
quelle
1
Für den Fall, dass es jemand anderem hilft ... Dies war weder in der stabilen noch in der instabilen Version von AngularJs auf der Website angularjs.org verfügbar. Um dies zum Laufen zu bringen, musste ich die neueste Version von Angular.js installieren
Anleitung finden Sie
3
Wie @geoidesic vorschlägt, landete dies nach 1.1.5, also achten Sie darauf in 1.1.6 (oder sehr wahrscheinlich 1.2.0)
Anson
1
Ich
1
Und was ist, wenn das zweite <tr> selbst ein "verschachteltes" wiederholt wird? Zum Beispiel: <tr ng-repeat-start = ".."> </ tr> <tr ng-repeat = "etwas anderes" nt-repeat-stop> </ tr>
Andre
@Andre Tu das nicht. Erstellen Sie lieber eine neue Direktive innerhalb Ihrer ersten ng-Wiederholung.
Geoidesic
22

Um Andres Frage oben auf 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

Hackfan
quelle
Ich habe versucht, diese Arbeit zu bekommen, aber ich bekomme nur: Unbestimmtes Attribut, gefunden 'ng-repeat-start', aber kein passendes 'ng-repeat-end' gefunden. Funktioniert das nicht mehr Mit eckigen 1,5
Stibay
3

UPDATE : Diese Antwort ist veraltet. Bitte lesen Sie die Antwort von @IgorMinar und verwenden Sie Standard ng-repeat-startund ng-repeat-endRichtlinien.

Es gibt zwei Möglichkeiten:

Die erste Option 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 Option ist die Verwendung eines aktualisierten Winkelcodes, der die Anweisung ngRepeat ( plnkr ) im Kommentarstil aktiviert.

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

vittore
quelle
Klingt gut. Ich verstehe aber nichts davon! In Ihrem ersten Beispiel sehe ich keine ng-Wiederholung, daher bin ich mir nicht sicher, wie relevant sie ist (ich habe mir die Geige angesehen, aber sie ist so kompliziert, dass ich weder Kopf noch Schwanz daraus machen kann). Ihr zweites Beispiel ist für mich nur ein Gobbledigook.
Geoidesic
Das erste Beispiel behebt das Problem nicht, da Sie immer noch einen sich wiederholenden Wrapper um die beiden Elemente haben ... dh das Element, das die ng-repeat-Direktive enthält, wird ebenfalls wiederholt - ich möchte nur, dass die inneren Elemente wiederholt werden.
Geoidesic
@ user2448430 nein, das tust du nicht. element.replaceWith(newElement);ersetzt das Wrapper-Tag durch das, was Sie benötigen. Sie können auch eine Schleife in Ihrer Direktive haben und so viele Tags hinzufügen, wie Sie in tmpl benötigen.
Vittore
Ich bin nicht einverstanden. Versuchte es und es wiederholt das Element, das die ng-repeat-Direktive enthält. Auch das zweite Beispiel funktioniert nicht wirklich. Das div wiederholt sich nicht, es ist nur das Array, das in Ihrem plnkr-Beispiel ausgegeben wird.
Geoidesic
1
@JoshGough tut es, so dass ich am Ende Regel zu meinem CSS hinzufüge, um diese Bereiche zu verbergen.
Vittore