lunes, 22 de diciembre de 2014

Angular JS Repetir una estructura un numero de veces. ng-repeat

Sabemos que ng-repeat itera sobre array de elementos pero nosotros queremos que itere un numero específico de veces que nosotros especificaremos. Por ejemplo. Repetir un elemento <li> de una lista un numero de veces fijado.

 El codigo de la vista que se nos ocurriría sería algo como...
<ul>
    <li ng-repeat="i in number"><span>{{$index+1}}</span></li> 
</ul>
Como "number" es un entero en lugar de un array. Esto no funciona.
La solución es un pequeño "truco". Convertir nuestro "number" en algo que pueda entender ng-repeat. Esto es, un array.
Para ello inicializaremos un array javascript con el numero deseado que queremos que se realiza la iteración en el ng-repeat. Estamos construyendo un array para que pueda ser interpretado con el convenio que espera la sentencia ng-repeat. Para ello en el controlador que gestionara la parte del codigo de nusetra vista tendremos algo como...

El codigo del vista quedaría así

<div ng-controller="myController">

   <ul>
       <li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
   </ul>
</div>



El codigo del controlador:

.controller('myController', function ( $scope) {
   ....
     $scope.number = 5;
     $scope.getNumber = function(num) {
          return new Array(num);   
     }
  ...
 }

En las nuevas versiones de angular. A partir de la 1.2 angular no itera sobre los elementos repetidos por ello es necesario realizar la iteración la modifcación: track by $index así podremos iterar sobre elementos "repetidos" del array

<li ng-repeat="i in getNumber(number) track by $index">

Solución proporcionada en:
http://stackoverflow.com/questions/16824853/way-to-ng-repeat-defined-number-of-times-instead-of-repeating-over-array por el usuario sh0ber

Suerte!!

No hay comentarios:

Publicar un comentario

Jesús Moreno - Ingeniero Ténico Informático - consultor Informático

Hola, soy Jesús Moreno Ingeniero Técnico Informático en sistemas por la US y propietario de éste blog. Mi trabajo en los ultimos años se ...