Angular.js ng-repeat w wielu elementach

Question 1

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?

Question 2

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>

Question 3

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

Question 4

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>

Answer 1

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?

Answer 2

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

1

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

3

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,

1

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

bresleveloper

1

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

Answer 3

1

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

Answer 4

3

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,

Answer 5

1

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

bresleveloper

Answer 6

1

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

Answer 7

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

geoidesic

Answer 8

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

Answer 9

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

Answer 10

3

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

1

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

vittore

Answer 11

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

Answer 12

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

Answer 13

@ 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

Answer 14

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

Answer 15

1

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

vittore

Angular.js ng-repeat w wielu elementach

Odpowiedzi:

AngularJs Commmit