Angular.js ng-repeat en múltiples elementos

83

Esta pregunta se ha abordado en parte aquí: Angular.js ng-repeat en múltiples tr's

Sin embargo, eso es solo una solución alternativa, en realidad no aborda el problema central, que es: ¿cómo se puede usar ng-repeat en múltiples elementos sin un contenedor?

Por ejemplo, jquery.accordion requiere que repitas un elemento h3 y div, ¿cómo podría uno hacer esto con ng-repeat?

javascript jquery angularjs angularjs-ng-repeat geodésico
fuente

Respuestas:

159

Ahora tenemos un soporte adecuado para esto, consulte:

Compromiso AngularJs

con este cambio ahora puedes hacer:

<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
fuente
1
En caso de que ayude a alguien más ... Esto no estaba disponible ni en la versión estable ni en la inestable de AngularJs en el sitio web angularjs.org. Para que esto funcione, tuve que instalar la vanguardia de Angular.js; el procedimiento está aquí: stackoverflow.com/questions/17501052/…
geoidesic
3
Como sugiere @geoidesic, esto aterrizó después de 1.1.5, así que tenga cuidado en 1.1.6 (o muy probablemente 1.2.0)
Anson
1
solo debo agregar que ng-repeat-start pertenecen a la versión inestable actualmente (13 de agosto)
bresleveloper
1
¿Y si el segundo <tr> en sí mismo es un "anidado" repetido? por ejemplo: <tr ng-repeat-start = ".."> </tr> <tr ng-repeat = "somethingelse" nt-repeat-stop> </tr>
Andre
@Andre No hagas eso. Más bien, cree una nueva directiva dentro de su primer ng-repeat.
geoidesic
22

Para responder la pregunta de Andre anterior en más de 2 niveles de ng-repeat en una tabla, puede usar múltiples ng-repeat-start para lograr esto.

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

Aquí hay un ejemplo de plunker

hackfan
fuente
Intento que esto funcione, pero solo obtengo: atributo no terminado, se encontró 'ng-repeat-start' pero no se encontró 'ng-repeat-end' que coincida. ¿Esto ya no funciona? Usando angular 1.5
stibay
3

ACTUALIZACIÓN : Esta respuesta está desactualizada. Consulte la respuesta de @IgorMinar y utilice directivas ng-repeat-starty estándares ng-repeat-end.

Hay dos opciones:

La primera opción es crear una directiva que renderice varias etiquetas y reemplace la etiqueta fuente ( 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); 
    }
})

La segunda opción es usar el código fuente actualizado de angular que habilita el estilo de comentario ngRepeat directive ( 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
fuente
Suena genial. ¡Aunque no entiendo nada de eso! En su primer ejemplo no veo ng-repeat, así que no estoy seguro de qué tan relevante es (miré el violín, pero es tan complicado que no puedo entenderlo). Tu segundo ejemplo es simplemente una tontería para mí.
Geoidesic
El primer ejemplo no aborda el problema porque todavía termina con una envoltura repetida alrededor de los dos elementos ... es decir, el elemento que contiene la directiva ng-repeat también se repite; solo quiero que se repitan los elementos internos.
Geoidesic
@ user2448430 no, no es así. element.replaceWith(newElement);reemplazará la etiqueta de envoltura con lo que necesita. también puede tener un bucle en su directiva y agregar tantas etiquetas como necesite en tmpl.
Vittore
Estoy en desacuerdo. Lo intenté y repite el elemento que contiene la directiva ng-repeat. Además, el segundo ejemplo no funciona realmente. El div no se repite, es solo la matriz que se genera en su ejemplo plnkr.
Geoidesic
1
@JoshGough lo hace, así que termino agregando una regla a mi CSS para ocultar esos intervalos.
vittore