Boa noite, tenho a seguinte situação. Preciso exibir todos os dados do usuário quando o mesmo for acionado.
Minha view
<div>
<h1 style="text-align: center;">Lista de usuários</h1>
<ul ng-repeat="usuario in usuarios">
<li><a href="#!/detalhes/{{$index+1}}">{{usuario.nome}}</a></li>
</ul>
</div>
Meu módulo
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/", {
templateUrl: "views/home.html",
controller: "homeCtrl"
})
.when("/detalhes/:id", {
templateUrl: "views/detalhes.html",
controller: "detalhesCtrl"
})
.otherwise({
redirectTo:'/',
templateUrl:'views/home.html',
controller: 'homeCtrl'
});
});
app.controller("homeCtrl", function($scope, $http) {
$http.get("json/data.json").then(function(response) {
$scope.usuarios = response.data;
});
})
app.controller("detalhesCtrl", function($scope, $routeParams) {
$scope.usuario = $scope.usuarios[$routeParams.id];
console.log($scope.usuarios);
console.log($routeParams);
})
Página onde os dados serão exibidos
<div>
<h1 style="text-align: center;">Dados do usuário</h1>
<p>{{usuario.nome}}</p>
<p>{{usuario.idade}}</p>
<p>{{usuario.time}}</p>
<a href="#!">Home</a>
</div>
Se alguém puder me ajudar, ficarei grato!