¿Manera de repetir ng un número definido de veces en lugar de repetir en una matriz?

Resuelto Malcr001 asked hace 11 años • 27 respuestas

¿Hay alguna manera de lograr ng-repeatun 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.numberigual 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>
Malcr001 avatar May 30 '13 05:05 Malcr001
Aceptado

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-repeatsolo 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.numbera 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 getNumberfunción.

Dan avatar May 29 '2013 22:05 Dan

Puedes hacerlo:

<div ng-repeat="i in [1, 2, 3, 4]">
  ...
</div>
akonsu avatar Feb 16 '2014 00:02 akonsu

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);
    };
};
DigitalZebra avatar May 29 '2013 22:05 DigitalZebra