View ngRoute array data

Asked

Viewed 28 times

1

Good evening, I have the following situation. I need to display all user data when it is triggered.

My 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>

My module

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);
})

Page where data will be displayed

<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>

If anyone can help me, I’d be grateful!

javascript angularjs

1 answer

1


I would use with rootScope as follows:

<!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

    Thanks @Virgilio Novic, that way it worked perfectly.

Browser other questions tagged javascript angularjs

You are not signed in. Login or sign up in order to post.