¿Manera de repetir ng un número definido de veces en lugar de repetir en una matriz?
¿Hay alguna manera de lograr ng-repeat
un número definido de veces en lugar de tener que iterar siempre sobre una matriz?
Por ejemplo, a continuación quiero que el elemento de la lista aparezca 5 veces suponiendo que sea $scope.number
igual a 5, además de incrementar el número para que cada elemento de la lista aumente 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>
Actualización (25/9/2018)
Las versiones más nuevas de AngularJS (>= 1.3.0) le permiten hacer esto solo con una variable (no se necesita función):
<li ng-repeat="x in [].constructor(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
$scope.number = 5;
Esto no era posible en el momento en que se formuló la pregunta por primera vez. Crédito a @Nikhil Nambiar por su respuesta a continuación para esta actualización
Original (29/05/2013)
Por el momento ng-repeat
solo acepta una colección como parámetro, pero podrías hacer esto:
<li ng-repeat="i in getNumber(number)">
<span>{{ $index+1 }}</span>
</li>
Y en algún lugar de tu controlador:
$scope.number = 5;
$scope.getNumber = function(num) {
return new Array(num);
}
Esto le permitiría cambiar $scope.number
a cualquier número que desee y aún mantener el enlace que está buscando.
EDITAR (6/1/2014) - Las versiones más nuevas de AngularJS (>= 1.1.5) requieren track by $index
:
<li ng-repeat="i in getNumber(number) track by $index">
<span>{{ $index+1 }}</span>
</li>
Aquí hay un violín con un par de listas que usan la misma getNumber
función.
Puedes hacerlo:
<div ng-repeat="i in [1, 2, 3, 4]">
...
</div>
A continuación se muestra un ejemplo de cómo podría hacer esto. Tenga en cuenta que me inspiré en un comentario en los documentos de ng-repeat: http://jsfiddle.net/digitalzebra/wnWY6/
Tenga en cuenta 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);
};
};