5

Estou tentando criar uma série de elementos repetidos sem saber a quantia de repetições que serão necessárias. Eu tenho um input no qual o usuário informará um valor númerico acima ou igual a 1 que refletirá na quantia de repetições necessárias.

<input type="text" ng-model="numeroRepeticoes">

O único comando de repetição que conheço é o ng-repeat (meu conhecimento em Angular não é muito amplo) mas neste caso ele não é apto. Algo como isto não funcionaria:

<div ng-repeat="{{ numeroRepeticoes }}">...</div>

2 Respostas 2

1

O angular só fornece o ng-repeat mesmo pra iterar sobre um array definido no $scope. Mas você pode usar isso pra fazer uma sacanagem e iterar sobre um array "simbólico". Basicamente crie no $scope uma propriedade que vai conter o número de iterações desejadas e então crie uma função que retorna um array desse tamanho. Então você itera nesse array.

Em código, você teria

// Número inicial de iterações
$scope.numIteracoes = 1;

// Construção do array 'fake'
$scope.iterador = function (num) {
    return new Array(num);
}

A partir daí você pode usar o ng-repeat com esse array passando o número de iterações como parâmetro. Ou seja, se você quer repetir uma div seria

<div ng-repeat="num in iterador(numIteracoes) track by $index">
    <!-- códigos da div aqui -->
</div>

Perceba que como numIteracoes é uma propriedade do $scope você pode atualizar ela dinamicamente, por exemplo com um input com ng-model apontando para ele.

Esse track by $index serve pra você identificar os items pela posição no array. Você pode ver mais sobre essa sintaxe aqui.

1

Isso é possível criando manualmente um vetor de itens a ser exibido pelo ngRepeat e associando um evento ngChange ao campo para então regerar o vetor e atualizar a lista.

Considere o seguinte template:

<input type="text" ng-model="numeroRepeticoes" ng-change="update()"/><br/>
Itens:
<div ng-repeat="item in items">Item {{ item }} ({{ $index }})</div>

E o seguinte código:

var loopApp = angular.module('loopApp', []);
loopApp.controller('LoopCtrl', function ($scope) {
    $scope.update = function() {
        $scope.items = [];
        var total = parseInt($scope.numeroRepeticoes);
        for (var i = 0; i < total; i++) {
            $scope.items.push(i + 1);
        }
    };
});

Então, cada vez que o usuário digitar no campo, a função update() será chamada, a qual irá alterar o vetor items, o que resultará na lista sendo gerada conforme o número de itens.

Demo no jsfiddle

Você deve fazer log-in para responder a esta pergunta.