Me pregunto si es posible abrir el elemento DOM durante el primer ciclo de ng-repeat y cerrarlo durante el segundo. Hablemos de alguna lista de elementos, y quiero mostrarlo en 2 (o puede ser 3, 4 ... no importa) en una fila. Entonces el resultado html será así:

<div class="row"> <!-- add this line during 1sr cycle -->
   <div class="element">...element1...</div>
   <div class="element">...element2...</div>
</div> <!-- add this line during 2nd cycle -->
<div class="row"> <!-- add this line during 3rd cycle -->
   <div class="element">...element3...</div>
   <div class="element">...element4...</div>
</div><!-- add this line during 4th cycle -->

El problema principal que ng-repeat no me permite poner la línea <div class="row"> en el primer ciclo y poner el cierre </div> en el segundo ciclo. ng-repeat agrega ambos durante cada ciclo. ¿Es posible encontrar alguna solución para este caso?

0
sphinks 11 dic. 2015 a las 16:47

3 respuestas

La mejor respuesta

No es posible con ng-repeat. Debe preparar la estructura de datos en su controlador (matriz multidimensional) o escribir una directiva personalizada que tomaría un parámetro adicional de cuántos elementos de la matriz toman para la iteración actual.

UPD: puede utilizar la función lodash 'chunk para dividir la matriz en matrices más pequeñas https://lodash.com/docs#chunk

1
George Herolyants 11 dic. 2015 a las 15:19

He encontrado una solución simple fuera de la caja en angularJs:

<div class="row" ng-repeat="element in elements" ng-if="$index%2==0">
    <div class="element" ng-repeat="element in elements|limitTo:2:$index">...</div>
</div>

Producirá 2 elementos seguidos, si necesita más, debe ajustar el argumento ng-if y limitTo.

0
sphinks 17 dic. 2015 a las 21:43

Como dijiste, no puedes generar solo medio elemento (por ejemplo, la etiqueta de apertura sin la etiqueta de cierre) en un ciclo de repetición.

Sin embargo, puede hacer cosas diferentes en un ciclo según la propiedad $index, como mostrar u ocultar un elemento específico en el primer ciclo ($ index: 0).

Alternativamente, eche un vistazo a ng-repeat-start y ng-repeat-end para generar más de un elemento en un ciclo. Más información: https://docs.angularjs.org/api/ng/directive/ngRepeat

0
DennisBeverloo 11 dic. 2015 a las 14:01