1
resposta

ngRepeat:dupes

Estou com um problema em um projeto que nao diz respeito aos projetos do treinamento. porem estou usando o treinamento angular como base de estudos para desenvolve-lo.

Se trata de um sistema de candidatos aonde tem uma lista.json obtida por $http e submetida ao $scope.

Quando nao utilizo $http, apenas $scope no controller como segue cod abaixo consigo puxar o conteudo com ng-repeat.

angular.module('zup').controller('CandidateController', function($scope, $http) {

    $scope.listaCandidate = [];
    $scope.filtro = '';

    $scope.candidate1 = {
        url : 'https://randomuser.me/api/portraits/women/13.jpg',
        name : 'Lorraiane',
        email : 'lorraiane.beck22@exemplo.com',
        phone : '(960)-861-1890',
        local : 'Uberlândia - MG',
        delete : 'images/delete.png',
        select : 'images/select-all.png',
        cheked : 'images/checked.png'   
    }
    $scope.candidate2 = {
        url : 'https://randomuser.me/api/portraits/women/68.jpg',
        name : 'Lorem',
        email : 'lorempsum@mail.com',
        phone : '(960)-861-1890',
        local : 'Uberlândia - MG',
        delete : 'images/delete.png',
        select : 'images/select-all.png',
        cheked : 'images/checked.png'   
    }
    $scope.candidate3 = {
        url : 'https://randomuser.me/api/portraits/women/57.jpg',
        name : 'Dolor',
        email : 'dolorsit123@mail.com',
        phone : '(960)-861-1890',
        local : 'São Paulo - SP',
        delete : 'images/delete.png',
        select : 'images/select-all.png',
        cheked : 'images/checked.png'   
    }


    $scope.listaCandidate.push($scope.candidate1);
    $scope.listaCandidate.push($scope.candidate2);
    $scope.listaCandidate.push($scope.candidate3);

});

Agora adaptando o controller para $http como segue cod abaixo meu ng-repeat acusa erro ngRepeat:dupes e a solucao online encontrada para isso seria utilizar track by $index que nao compreendi.

angular.module('zup').controller('CandidateController', function($scope, $http) {

    $scope.listaCandidate = [];
    $scope.filtro = '';

    $http({
        url: 'listaCandidate.json',
        method: 'GET'
    }).then(function(resposta){
        $scope.listaCandidate = resposta.data;
    })


});

Segue abaixo os cod relacionados:

listaCandidate.json

[
    {
    "id": 1,
    "url" : "https://randomuser.me/api/portraits/women/13.jpg",
    "name" : "Lorraiane",
    "email" : "lorraiane.beck22@exemplo.com",
    "phone" : "(960)-861-1890",
    "local" : "Uberlândia - MG",
    "delete" : "images/delete.png",
    "select" : "images/select-all.png",
    "cheked" : "images/checked.png"   
},
{
    "id": 2,
    "url" : "https://randomuser.me/api/portraits/women/68.jpg",
    "name" : "Lorem",
    "email" : "lorempsum@mail.com",
    "phone" : "(960)-861-1890",
    "local" : "Uberlândia - MG",
    "delete" : "images/delete.png",
    "select" : "images/select-all.png",
    "cheked" : "images/checked.png"   
},
{
    "id": 3,
    "url" : "https://randomuser.me/api/portraits/women/57.jpg",
    "name" : "Dolor",
    "email" : "dolorsit123@mail.com",
    "phone" : "(960)-861-1890",
    "local" : "São Paulo - SP",
    "delete" : "images/delete.png",
    "select" : "images/select-all.png",
    "cheked" : "images/checked.png" 
}
]

Uma das tres rotas na qual o ng-repeat aplica os dados recebidos.

    <input ng-model="filtro" ng-model-options="{debonce:500}" type="text" size="80" maxlength="300" placeholder="Buscar">

    <div class="conteiner-candidate">    
        <meu-painel ng-repeat="candidate in listaCandidate track by $id" class="conteiner-candidate-int painel-animado">
        </meu-painel>
    </div>

E por fim a painel de candidatos onde os dados são recebidos.

<div class="candidate-photo">
    <figure class="photo">
        <a href="#"><img src="{{candidate.url}}"></a>
    </figure>
</div>
<div class="candidate-name">
    <a href="#">{{candidate.name}}</a>
</div>
<div class="candidate-email">
    <a href="#">{{candidate.email}}</a>
</div>
<div class="candidate-phone">   
    <a href="#">{{candidate.phone}}</a>
</div>
<div class="candidate-local">
    <a href="#">{{candidate.local}}</a>
</div>
<div class="candidate-selector">
    <figure class="icons">
        <a href="#"><img src="{{candidate.delete}}"></a>&nbsp &nbsp
        <a href="#"><img src="{{candidate.select}}"></a>&nbsp &nbsp
        <a href="#"><img src="{{candidate.cheked}}"></a>
    </figure>
</div>

Espero que possam me ajudar a solucionar esse problema, fico no aguardo.

1 resposta

Fala aí Lucas, tudo bem? Precisa ver se sua request está sendo chamada corretamente (Network).

Precisa ver se o valor de resposta.data está sendo setado no $scope.

Alguns console.log serão necessários para isso.

Sobre o track by $id ele deixa o algoritmo do Angular um pouco mais inteligente e sabe o que deve ser inserido/removido do DOM.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software