Angular.js ng-repeat w wielu elementach

To pytanie zostało częściowo rozwiązane tutaj: Angular.js ng-repeat w wielu tr

Jednak jest to tylko obejście, tak naprawdę nie rozwiązuje podstawowego problemu, którym jest: jak można użyć ng-powtórzenia w wielu elementach bez opakowania?

Na przykład jquery.accordion wymaga powtórzenia elementu h3 i div, jak można to zrobić z ng-repeat?

— geoidesic
źródło

Odpowiedzi:

159

Mamy teraz odpowiednie wsparcie, zobacz:

AngularJs Commmit

dzięki tej zmianie możesz teraz:

<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
źródło

Na wypadek, gdyby pomogło to komuś innemu ... Nie było to dostępne ani w stabilnej, ani w niestabilnej wersji AngularJs na stronie angularjs.org. Aby to zadziałało, musiałem zainstalować krwawiącą krawędź Angular.js - instrukcja jest tutaj: stackoverflow.com/questions/17501052/ ...

— geoidesic

Jak sugeruje @geoidesic, wylądował po 1.1.5, więc uważaj na to w 1.1.6 (lub bardzo prawdopodobne 1.2.0)

— Anson,

muszę tylko dodać, że ng-repeat-start należą obecnie do niestabilnej wersji (13

— bresleveloper

A co, jeśli drugi element <tr> sam jest „zagnieżdżony”? na przykład: <tr ng-repeat-start = ".."> </tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </tr>

— Andre

@Andre Nie rób tego. Zamiast tego utwórz nową dyrektywę w swoim pierwszym powtórzeniu ng.

— geoidesic

Aby odpowiedzieć na powyższe pytanie Andre dotyczące więcej niż 2 poziomów ng-repeat w tabeli, możesz użyć wielu ng-repeat-start, aby to osiągnąć.

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

Oto przykład plunkera

— hackfan
źródło

Próbuję uzyskać tę pracę, ale otrzymuję tylko: Niezakończony atrybut, znaleziono „ng-powtórzenie-start”, ale nie znaleziono pasującego „ng-powtórzenie-koniec”. Czy to już nie działa? Korzystanie z kątowego 1,5

— stibay

AKTUALIZACJA : Ta odpowiedź jest nieaktualna. Zobacz odpowiedź @IgorMinar i użyj norm ng-repeat-starti ng-repeat-enddyrektyw.

~~Istnieją dwie możliwości:~~

Pierwsza opcja to stworzenie dyrektywy, która wyrenderuje kilka tagów i zastąpi tag źródłowy ( 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); 
    }
})

Drugą opcją jest użycie zaktualizowanego kodu źródłowego angulara, który włącza dyrektywę ngRepeat w stylu komentarzy ( 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>

— vittore
źródło

Brzmi wspaniale. Jednak nic z tego nie rozumiem! W twoim pierwszym przykładzie nie widzę powtórzenia ng, więc nie jestem pewien, jak to jest istotne (patrzyłem na skrzypce, ale jest tak skomplikowane, że nie mogę z tego zrobić głowy ani ogona). Twój drugi przykład jest dla mnie po prostu gobbledigook.

— geoidesic

Pierwszy przykład nie rozwiązuje problemu, ponieważ nadal kończy się powtarzającym się opakowaniem wokół dwóch elementów ... tj. Element zawierający dyrektywę ng-repeat również się powtarza - chcę po prostu powtórzyć elementy wewnętrzne.

— geoidesic

@ user2448430 nie, nie masz. element.replaceWith(newElement);zastąpi tag opakowania tym, czego potrzebujesz. również możesz mieć pętlę w swojej dyrektywie i dodać tyle tagów, ile potrzebujesz do tmpl.

— vittore

Nie zgadzam się. Wypróbowałem i powtarza element zawierający dyrektywę ng-repeat. Również drugi przykład tak naprawdę nie działa. Element div się nie powtarza, to tylko tablica, która jest wyświetlana w przykładzie z plnkr.

— geoidesic

@JoshGough to robi, więc w końcu dodaję regułę do mojego css, aby ukryć te rozpiętości.

— vittore