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>   
<a href="#"><img src="{{candidate.select}}"></a>   
<a href="#"><img src="{{candidate.cheked}}"></a>
</figure>
</div>
Espero que possam me ajudar a solucionar esse problema, fico no aguardo.