¿Existe una forma de ng-repeat un número definido de veces en lugar de tener que iterar siempre sobre un array?
Por ejemplo, abajo quiero que el elemento de la lista se muestre 5 veces asumiendo que $scope.number
es igual a 5 además de incrementar el número para que cada elemento de la lista se incremente como 1, 2, 3, 4, 5
Resultado deseado:
<ul>
<li><span>1</span></li>
<li><span>2</span></li>
<li><span>3</span></li>
<li><span>4</span></li>
<li><span>5</span></li>
</ul>
Por el momento, ng-repeat
sólo acepta una colección como parámetro, pero podría hacer esto:
<ul>
<li ng-repeat="i in getNumber(number)"><span>{{$index+1}}</span></li>
</ul>
Y en algún lugar de tu controlador
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Esto te permitiría cambiar $scope.number
por cualquier número a tu gusto y seguir manteniendo el binding que buscas.
[Aquí hay un fiddle][1] con un par de listas usando la misma función getNumber
.
EDICIÓN 1/6/2014: Las nuevas versiones de Angular 1.x hacen uso de la siguiente sintaxis:
<li ng-repeat="i in getNumber(number) track by $index">
EDICIÓN 25/9/2018: Las versiones más recientes de Angular 1.x le permiten hacer esto sin una función. Si tu código es simple y no necesitas una función getNumber
por otras razones, ahora puedes omitirla y sólo hacer esto:
<div ng-repeat="x in [].constructor(number) track by $index">
Crédito a @Nikhil Nambiar de su respuesta a continuación para esta actualización
Aquí hay un ejemplo de cómo se puede hacer esto. Tenga en cuenta que me inspiré en un comentario de la documentación de ng-repeat:
Observe la directiva ng-repeat:
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="a in range(5) track by $index">{{$index + 1}}</div>
</div>
</div>
Aquí está el controlador:
function TestCtrl($scope) {
$scope.range = function(n) {
return new Array(n);
};
};