É possível usar ng-repeat para iterar sobre um objeto em vez de um array?

Sim, usando ng-repeat="(chave, valor) em myObject". Observe que o AngularJS itera pelas chaves do objeto em ordem classificada, não em ordem de inserção, portanto, um array é mais seguro quando a sequência importa.

Diretiva AngularJS ng-repeat com exemplo

⚡ Resumo Inteligente

A diretiva ng-repeat no AngularJS renderiza uma cópia de um elemento para cada item em uma coleção definida no escopo do controlador. Ela transforma um array em uma lista, uma tabela ou qualquer marcação repetida sem a necessidade de escrever um loop manualmente.

🔁 Comportamento Essencial: A diretiva ng-repeat clona o elemento hospedeiro uma vez por item, portanto, ela deve estar no elemento que está sendo repetido, e não no seu contêiner.
🏷️ Variável de loop: O nome que precede a palavra "in" torna-se um alias local para o item atual dentro desse clone.
🧬 Escopo infantil: Cada iteração recebe seu próprio escopo filho, razão pela qual atribuir um valor primitivo dentro do loop não alcança o escopo pai.
🔑 Identidade Tracking: A tracA expressão `k by` informa ao AngularJS como identificar itens e é necessária quando uma coleção contém valores repetidos.
🔢 Locais integrados: Propriedades como $index, $first e $last estão disponíveis em cada iteração para numeração e estilização.
⚠️ Status do suporte: O AngularJS chegou ao fim de sua vida útil em 31 de dezembro de 2021 e não receberá mais atualizações de segurança.

Saiba Mais

Diretiva ng-repeat em AngularJS

O ng-repetir Directivas Em AngularJS, o ng-repeat é usado para exibir valores repetidos definidos no controlador. Às vezes, precisamos mostrar uma lista de itens na visualização, e o ng-repeat renderiza uma lista definida no controlador em uma página de visualização.

⚠️ Aviso de suporte: AngularJS alcançou fim da vida em 31 de dezembro de 2021 e não recebe mais patches ou correções de segurança. A diretiva abaixo permanece válida para a manutenção de aplicações AngularJS 1.x existentes; em versões modernas. Angular o equivalente é o *ngFor diretiva estrutural.

Exemplo de diretiva AngularJS ng-repeat

Vejamos um exemplo da diretiva ng-repeat no AngularJS:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
    <h1>Topics</h1>
    <ul>
        <li ng-repeat="tpname in TopicNames">
            {{tpname.name}}
        </li>
    </ul>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('DemoController', function($scope) {
        $scope.TopicNames = [
            { name: "What controllers do from Angular's perspective" },
            { name: "Controller Methods" },
            { name: "Building a basic controller" }
        ];
    });
</script>

</body>
</html>

Code Explicação:

De acordo com o relatório controladorPrimeiro, definimos a matriz de itens da lista a ser exibida na visualização. Aqui, uma matriz chamada TopicNames Contém três itens, cada um sendo um par nome-valor.
O array é atribuído diretamente a $scope.TopicNames, o que o torna disponível para a visualização vinculada a este controlador.
As tags HTML <ul> (lista não ordenada) e <li> (item da lista) exibe os itens. A diretiva ng-repeat itera sobre cada entrada na matriz, e tpname é a variável local que armazena o item atual, então {{tpname.name}} Imprime sua propriedade de nome.

⚠️ Correção: A explicação original afirmava que o array foi “adicionado a uma variável membro chamada topics“Essa variável não existe no código — o array é atribuído diretamente a $scope.TopicNames, que é o nome ao qual a visualização se refere. Introduzir um segundo nome aqui é uma causa comum de uma lista vazia.

Se o código for executado com sucesso, a seguinte saída será exibida no navegador.

Vários controladores AngularJS

Anteriormente, vimos um único controlador no qual um método lidava tanto com adição quanto com subtração.tracEm vez de lidar com números, você pode usar vários controladores para separar a lógica de forma mais clara. Por exemplo, um controlador pode operar com números enquanto outro opera com strings.

Vejamos um exemplo de definição de múltiplos controladores em uma aplicação AngularJS.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>
<h1>Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.8.3/angular.js"></script>

<div ng-app="DemoApp">
    <div ng-controller="firstcontroller">
        <div ng-controller="secondcontroller">
            {{lname}}
        </div>
    </div>
</div>

<script>
    var app = angular.module('DemoApp', []);

    app.controller('firstcontroller', function($scope) {
        $scope.pname = "firstcontroller";
    });

    app.controller('secondcontroller', function($scope) {
        $scope.lname = "secondcontroller";
    });
</script>

</body>
</html>

Code Explicação:

Dois controladores são definidos, firstcontroller e secondcontrollerCada um associa uma variável ao seu próprio escopo: pname no primeiro, lname no segundo.
Na visualização, o segundo controlador está aninhado dentro do primeiro, e a expressão é: lname do escopo interno. Como um controlador aninhado herda de seu pai, {{pname}} Isso também se resolveria aqui — a herança flui de cima para baixo, nunca de baixo para cima.

Se o código for executado com sucesso, o texto segundo controlador é exibido.

Como usar track por com ng-repeat

O erro mais comum no ng-repeat é o erro Duplicates in a repeater are not allowedO erro ocorre quando uma coleção contém o mesmo valor duas vezes, interrompendo completamente a renderização da lista.

A causa é a identidade. tracrei. O AngularJS precisa de uma chave estável para cada item para que possa reutilizar nós DOM em vez de reconstruí-los a cada digest. Por padrão, ele usa o próprio valor do item, então dois valores idênticos entram em conflito.

<!-- Fails: the value 2 appears twice -->
<li ng-repeat="n in [1, 2, 2, 3]">{{n}}</li>

<!-- Works: position is unique even when values repeat -->
<li ng-repeat="n in [1, 2, 2, 3] track by $index">{{n}}</li>

<!-- Melhor for records from a server: track by a real identifier -->
<li ng-repeat="topic in TopicNames track by topic.id">{{topic.name}}</li>

A escolha entre as duas formas é mais importante do que parece à primeira vista. Tracking by $index sempre resolve o erro, porque uma posição é única por definição, mas vincula cada nó DOM a um slot em vez de a um registro. Reordenar ou filtrar a coleção reutiliza os nós incorretos, o que se manifesta como campos de entrada com erros.ping o texto da linha anterior.

Tracking por um identificador genuíno, como topic.id Evita isso completamente. O AngularJS consegue acompanhar cada registro à medida que ele se move, reordenando os nós existentes em vez de destruí-los e recriá-los. Em listas longas, isso também é consideravelmente mais rápido, já que uma nova renderização afeta apenas as linhas que realmente foram alteradas. Use $index Apenas para matrizes de valores simples que nunca são reordenadas.

Propriedades especiais disponíveis dentro de ng-repeat

Cada iteração do ng-repeat expõe diversas propriedades somente leitura em seu próprio escopo filho. Elas descrevem a posição do item atual dentro da coleção, abrangendo numeração, estilos alternados e separadores, sem adicionar nenhum estado extra ao controlador.

Propriedade	Formato	Valor
`$index`	Sessão	Posição do item atual, começando em 0.
`$first`	Booleano	Verdadeiro apenas para o primeiro item.
`$last`	Booleano	Verdadeiro apenas para o último item.
`$middle`	Booleano	Verdadeiro para todos os itens que não são nem o primeiro nem o último.
`$even`	Booleano	Verdadeiro quando $index é par
`$odd`	Booleano	Verdadeiro quando $index é ímpar

Um uso típico combina-os com ng-class para listras zebradas.ping, como em ng-class="{'row-alt': $odd}", ou com ng-if para renderizar um separador em todas as linhas, exceto na última, escrito ng-if="!$last"Exibir um número de linha legível para humanos é simplesmente {{$index + 1}}, já que o índice começa em zero. Todas as seis propriedades são recalculadas automaticamente sempre que a coleção é alterada, portanto, nada precisa ser recalculado manualmente.

Erros comuns do ng-repeat e como corrigi-los

A maioria dos problemas com ng-repeat decorre de valores duplicados, herança de escopo ou da diretiva estar no elemento errado. Cada sintoma abaixo indica sua causa.

Não são permitidas duplicatas em um repetidor: A coleção contém um valor repetido. Adicionar track by $index, ou melhor, track by Uma propriedade única.
A lista não retorna nada: O nome na visualização não corresponde à propriedade no escopo. Imprima a coleção com {{TopicNames}} Para confirmar que chegou.
Todos os elementos se repetem, inclusive o elemento que os envolve: O elemento ng-repeat foi colocado no contêiner em vez de no item. Mova-o para o <li> or <tr>.
Editar um campo de entrada altera a linha errada: a lista é tracked por $index enquanto os itens são reabastecidos. Track por um identificador estável em vez disso.
As alterações dentro do loop não são persistentes: Cada iteração tem seu próprio escopo filho, portanto, escrever em um tipo primitivo cria uma cópia local. Escreva em uma propriedade de objeto, como item.done.

Perguntas Frequentes

Sim, usando ng-repeat="(key, value) in myObject"Observe que o AngularJS itera pelas chaves do objeto em ordem classificada, e não na ordem de inserção, portanto, um array é mais seguro quando a sequência é importante.

Filtros em cadeia na expressão, como em ng-repeat="t in TopicNames | filter:search | orderBy:'name'"O array original permanece inalterado; apenas a ordem de renderização e o subconjunto são modificados.

Sim. Travas deslizantes portáteis AI ferramentas mapeiam ng-repeat para *ngFor e track por para tracFunções kBy. Verifique os filtros com atenção, pois o Angular removeu deliberadamente os pipes filter e orderBy integrados.

As ferramentas de IA detectam chamadas de função dentro da expressão de repetição, que são executadas novamente a cada digestão, e não são identificadas. traccláusulas que forçam reconstruções completas do DOM. Ambas são as causas usuais de uma lista lenta.

Utilize o formulário de comentários. ng-repeat-start e ng-repeat-end, que repete uma série de elementos irmãos. Isso é importante em tabelas, onde uma div extra quebraria a marcação.