Actualmente tengo dos filas con 2 SPAN en cada una. Lo que me gustaría hacer es reemplazar estos DIV y SPAN codificados por una directiva ng-repeat.

Mi problema es que mis 4 SPAN van más de 4 filas o todas van en la misma.

¿Es esto factible con Angular.js?

Leí cosas sobre ng-repeat-start y ng-repeat-end, pero no estoy seguro de que esto pueda ayudarme aquí.

Aquí tienes un Plunker: http://plnkr.co/edit/DEf2JSTFDBvDXusJDsX7?p=preview

¡Gracias!

EDITAR: Usé SPAN en mi ejemplo de Plunker por simplicidad, pero en mi problema del mundo real, estoy usando una cuadrícula de arranque y tengo, de hecho, 2 <div class="col-xs-12 col-md-3"> en cada <div class="row"> . Espero que aclare las cosas lo suficiente.

1
Rodolphe 22 ene. 2015 a las 13:18

4 respuestas

La mejor respuesta

Muy simple con bootstrap:

<div class="row">
  <div class="col-xs-6" ng-repeat="i in [1,2,3,4]">
    {{i}}
  </div>
</div>

Incluso puede establecer el ancho del div contenedor, si no desea que sea del 100%.

Plunker: http://plnkr.co/edit/J0bKs0BeGW7ltqtnQbNC?p=preview

1
Nikos Paraskevopoulos 22 ene. 2015 a las 11:01

Si su html se parece a:

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>1</span>
     <span>2</span>
  </div>
</div>

<div class="row">
  <div class="col-md-3 col-xs-12">
     <span>3</span>
     <span>4</span>
  </div>
</div>

Entonces puede considerar hacer esto con ng-repeat [no se necesita <br>]

<div class="row">
  <div class="col-md-3 col-xs-12" ng-repeat="i in [1,3]">
    <span >{{i}}</span>
    <span >{{i+1}}</span>
  </div>
</div>

Espero que resuelva tu propósito.

0
nalinc 22 ene. 2015 a las 11:07

No es agradable pero funciona

<div class="row" ng-repeat="i in [1,2,3,4]" ng-if="$even"><span>{{i}}</span><span>{{i+1}}</span></div>

La solución depende de lo que quieras lograr

Otra opción es organizar sus datos no en una matriz plana sino como una matriz de matrices

[
  [1,2],
  [3,4],
  [5],
]

Y haz ng-repeat en ng-repeat

<div class="row" ng-repeat="i in myArray">
     <span ng-repeat="j in i">{{j}}</span>
</div>
1
szapio 22 ene. 2015 a las 11:21

Es mejor usar la propiedad $ even y $ impar de ng-repeat.

<div class="row">
    <span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
      <br ng-if="$odd">
    </span>
  </div>

O,

 <div class="row">
        <span ng-repeat="i in [1,2,3,4,5,6]">{{i}}
          <br ng-if="$index%2===1">
        </span>
      </div>
1
Ved 22 ene. 2015 a las 10:43