Angular.js ng-repeat em vários elementos

83

Esta questão foi parcialmente tratada aqui: Angular.js ng-repeat em vários tr's

No entanto, isso é apenas uma solução alternativa, na verdade não aborda o problema principal, que é: como alguém pode usar ng-repeat em vários elementos sem um wrapper?

Por exemplo, jquery.accordion requer que você repita um elemento h3 e div, como alguém poderia fazer isso com ng-repeat?

javascript jquery angularjs angularjs-ng-repeat geoidésico
fonte

Respostas:

159

Agora temos um suporte adequado para isso, consulte:

AngularJs Commmit

com essa mudança, você agora pode fazer:

<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
fonte
1
Caso isso ajude outra pessoa ... Isso não estava disponível na versão stable, nem unstable do AngularJs no site angularjs.org. Para fazer isso funcionar, tive que instalar a tecnologia mais avançada do Angular.js - o como fazer está aqui: stackoverflow.com/questions/17501052/…
geoidesic
3
Como @geoidesic sugere, isso pousou após 1.1.5, então preste atenção em 1.1.6 (ou muito provavelmente 1.2.0)
Anson
1
apenas deve adicionar que ng-repeat-start pertence à versão instável atualmente (13 de agosto)
bresleveloper
1
E se o segundo <tr> em si for um "aninhado" repetido? por exemplo: <tr ng-repeat-start = ".."> </tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </tr>
Andre
@Andre Não faça isso. Em vez disso, crie uma nova diretiva dentro de sua primeira repetição de ng.
geoidésico
22

Para responder à pergunta de Andre acima em mais de 2 níveis de repetição de ng em uma tabela, você pode usar o início de repetição de vários ng para fazer isso.

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

Aqui está um exemplo de êmbolo

hackfan
fonte
Tentando fazer este trabalho, mas estou obtendo apenas: Atributo não terminado, encontrado 'ng-repeat-start', mas nenhum 'ng-repeat-end' correspondente encontrado. Isso não funciona mais? Usando angular 1,5
stibay
3

ATUALIZAÇÃO : Esta resposta está desatualizada. Por favor, veja a resposta de @IgorMinar e use padrões ng-repeat-starte ng-repeat-enddiretivas.

Existem duas opções:

A primeira opção é criar uma diretiva que irá renderizar várias tags e substituir a tag de origem ( 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); 
    }
})

A segunda opção é usar o código-fonte atualizado do angular que ativa a diretiva ngRepeat do estilo de comentário ( 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
fonte
Parece bom. Eu não entendo nada disso! Em seu primeiro exemplo, não vejo ng-repeat, então não tenho certeza de como isso é relevante (olhei para o violino, mas é tão complicado que não consigo decifrá-lo). Seu segundo exemplo é apenas gobbledigook para mim.
geoidesic
O primeiro exemplo não resolve o problema porque você ainda termina com um invólucro repetido em torno dos dois elementos ... ou seja, o elemento que contém a diretiva ng-repeat também é repetido - eu só quero que os elementos internos sejam repetidos.
geoidésico
@ user2448430 não, não precisa. element.replaceWith(newElement);substituirá a tag de invólucro pelo que você precisa. também você pode ter um loop em sua diretiva e adicionar quantas tags forem necessárias ao tmpl.
vittore
Discordo. Tentei e ele repete o elemento que contém a diretiva ng-repeat. Além disso, o segundo exemplo não está realmente funcionando. O div não se repete, é apenas a matriz que está sendo gerada em seu exemplo do plnkr.
geoidésico
1
@JoshGough faz, então acabo adicionando regra ao meu css para esconder esses spans.
Vittore