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?


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>

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.


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


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>

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>


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 .


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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.