1

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!

1 Resposta 1

1

Eu utilizaria com rootScope da seguinte forma:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>Projeto</title>
</head>
<body>
    <ng-view></ng-view>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-route.js"></script>
    <script>
        var app = angular.module("myApp", ["ngRoute"]);
        app.run(function($rootScope, $http) 
        {
            $rootScope.usuarios = [];   
            $rootScope.load = function(){
                $http.get("json/data.json").then(function(response) {
                    $rootScope.usuarios = response.data;                    
                });
            }
            $rootScope.load();      
        });
        app.config(function($routeProvider) {
            $routeProvider
                .when("/", {
                    templateUrl: "views/home.html",
                    controller: "homeCtrl"
                })
                .when("/detalhes/:id", {
                    templateUrl: "views/detalhes.html",
                    controller: "detalhesCtrl"
                })
                .otherwise({ redirect: '/' });
        });

        app.controller("homeCtrl", function($scope, $rootScope) {           

        })

        app.controller("detalhesCtrl", function($scope, $rootScope, $routeParams) {                             
            $scope.usuario = $rootScope.usuarios[$routeParams.id - 1];              
        })
    </script>   
</body>
</html>
1
  • 1
    Obrigado @Virgilio Novic, dessa maneira funcionou perfeitamente. Commented 17/04/2018 às 1:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .