Iteração ng-repetir apenas X vezes em AngularJs

86

Como posso usar ng-repeat como para em JavaScript?

exemplo:

<div ng-repeat="4">Text</div>

Eu quero iterar com ng-repeat 4 vezes, mas como posso fazer isso?

Vural
fonte
3
Ambos são possíveis: as diretivas têm nomes com letras maiúsculas e minúsculas, como ngBind. A diretiva pode ser chamada traduzindo o nome do caso camel para o caso snake com estes caracteres especiais:, - ou _. Opcionalmente, a diretiva pode ser prefixada com x- ou data- para torná-la compatível com o validador HTML.
asgoth
2
wow, como vêm tantas respostas erradas, você deve usar ng-repeat = "item in items | limitTo: 4"
Toolkit de
Há uma chance de que ele não tenha nenhum array para iterar. Digamos, para exibir as estrelas em uma classificação por estrelas. Pode haver um campo para quantas estrelas você precisa exibir, mas isso não é iterável.
nirazul
@Toolkit ... e o que é items..?
TJ

Respostas:

342

O Angular vem com um filtro limitTo: limit, ele suporta a limitação dos primeiros x itens e dos últimos x itens:

<div ng-repeat="item in items|limitTo:4">{{item}}</div>
David Lin
fonte
14
Essa deve ser a resposta, pois também funciona com a iteração de objetos em um array. Além disso, é um recurso Angular.
Ashley Coolman
29
Este é um trecho de código incrivelmente útil, mas não satisfaz realmente a pergunta do OP. Ele está simplesmente procurando uma maneira de repetir n vezes e provavelmente não tem um objeto real para iterar.
SamHuckaby
2
esta deve ser a resposta, ele usa as ferramentas fornecidas pelo núcleo AngularJS
Udo
10
Na verdade, isso não resolve o problema. Você está assumindo que ele tem um objeto chamadoitems
Batman
1
De fato, não é uma resposta útil para a pergunta (pesquisei especificamente como iterar X vezes, e não limitar X), mas mesmo assim um pedaço de código útil.
MacK
65

Esta é a solução alternativa mais simples que eu poderia pensar.

<span ng-repeat="n in [].constructor(5) track by $index">
{{$index}}
</span>

Aqui está um exemplo do Plunker.

ChandrasekarG
fonte
2
Inteligente e muito útil sem usar nenhuma função no controlador parado. Ainda não
entendi
1
Esta deve ser a resposta . OP pediu "usando ng-repeat como para". Isso implica ter toda a implementação diretamente na visualização, sem qualquer "assistência" do controlador. Esta solução faz exatamente isso ... e é muito inteligente para inicializar.
Karfus
Legal, mas não funciona em todas as versões angulares. Estou usando 1.2.9 e não é compatível:Error: [$parse:isecfld]
Emaboursa
50

Você pode usar o método de fatia no objeto de matriz javascript

<div ng-repeat="item in items.slice(0, 4)">{{item}}</div>

Curto e doce

Gihan
fonte
2
por que está errado ?. Funciona. Vamos pegar outro cenário, se você quiser elementos de array de 2 a 4 de índices de array. Funciona com o filtro limitTo?
Gihan
4
Não está errado, simplesmente não é tão fácil quantoitem in items|limitTo:4
CENT1PEDE
1
Isso adiciona a funcionalidade de que eu poderia mostrar os itens 1 a 4 e, em seguida, clicar em um botão para alterar .slice (0,4) para .slice (5,8), permitindo um paginador simples. Obrigado!
BaneStar007
39

no html:

<div ng-repeat="t in getTimes(4)">text</div>

e no controlador:

$scope.getTimes=function(n){
     return new Array(n);
};

http://plnkr.co/edit/j5kNLY4Xr43CzcjM1gkj

EDITAR:

com angularjs> 1.2.x

<div ng-repeat="t in getTimes(4) track by $index">TEXT</div>
mpm
fonte
19
outras opções: t in [1,2,3,4]ou t in 'aaaa' etc :)
Valentyn Shybanov
4
Parece estranho que o Angular não possa suportar um loop matemático sem exigir uma função para apoiá-lo.
Guido Anselmi
4
Sim, posso imaginar ter que iterar 30x, escrevendo como [1,2,3,4].. Que solução desanimadora esta
Matej
2
Veja abaixo a resposta de DavidLin para uma solução melhor.
SamHuckaby
@SamHuckaby, o problema é iterar em um range.limitTo é inútil nesse caso. Não se trata de iterar sobre um conjunto de valores que significam algo por si só, é iterar 4 vezes, por exemplo. Não 4 vezes sobre uma fatia de um array existente, apenas 4 vezes. assim como no coffeescript quando você cria uma fatia ad hoc, como "[0..4]", você não se preocupa realmente com os valores reais, apenas que você repetirá uma operação 4 vezes.
mpm
13

A resposta dada por @mpm não está funcionando dá o erro

Duplicatas em um repetidor não são permitidas. Use a expressão 'rastrear por' para especificar chaves exclusivas. Repetidor: {0}, chave duplicada: {1}

Para evitar isso junto com

ng-repeat = "t em getTimes (4)"

usar

rastrear por $ index

como isso

<div ng-repeat = "t in getTimes (4) track by $ index"> TEXTO </div>

Pratik Goenka
fonte
minha técnica funcionou com a versão do angularjs que usei. Basta verificar o plunkr, vou atualizá-lo o mais rápido possível.
mpm
10

Para repetir 7 vezes, tente usar uma matriz com comprimento = 7 e rastreá- la por $ index :

<span ng-repeat="a in (((b=[]).length=7)&&b) track by $index" ng-bind="$index + 1 + ', '"></span>

b=[]crie um Array «b» vazio,
.length=7defina seu tamanho para «7»,
&&bdeixe o novo Array «b» disponível para repetição de ng,
track by $indexonde «$ index» é a posição de iteração.
ng-bind="$index + 1"exibição começando em 1.

Para repetir X vezes:
basta substituir 7 por X .

funnyniko
fonte
Não está claro o que esta resposta oferece que ainda não foi coberto pela resposta aceita ou pelas duas com votos mais altos.
JamesT
Nada mais do que o quão poderoso o Angular pode ser.
funnyniko
3
As duas respostas com votos mais altos parecem assumir que «itens» é uma matriz. Este faz a matriz no lugar.
funnyniko
Muito bem, funciona. Esta é a única solução que realmente responde à questão do OP. É incrível que tenha apenas alguns votos. Só me pergunto se existe uma solução mais elegante.
Healforgreen
3

Todas as respostas aqui parecem assumir que os itens são uma matriz. No entanto, no AngularJS, pode muito bem ser um objeto. Nesse caso, nem a filtragem com limitTo nem array.slice funcionará. Como uma solução possível, você pode converter seu objeto em um array, se não se importar em perder as chaves do objeto. Aqui está um exemplo de um filtro para fazer exatamente isso:

myFilter.filter('obj2arr', function() {
    return function(obj) {
        if (typeof obj === 'object') {
            var arr = [], i = 0, key;
            for( key in obj ) {
                arr[i] = obj[key];
                i++;
            }
            return arr;
        }
        else {
            return obj;
        }

    };
});

Uma vez que é uma matriz, use slice ou limitTo, conforme declarado em outras respostas.

Por Quested Aronsson
fonte