Search code examples
javascriptangularjscontrollerangularjs-ng-route

Display a specific object from array on another ng-route page

I am building a project which I have a bunch of profiles coming from an Array. One page displays them as a list, where each profile has a button to display more details about it.

The problem is that I don't know how to pass this specific object data to this another route. So I am wondering how it could be done. Any suggestions? Thank you

controller.js

var App = angular.module("App", ['ngRoute']);

App.config(function($routeProvider) {
    $routeProvider

        .when('/allprofiles', {
            templateUrl : 'pages/all.profiles.html',
            controller  : 'allProfilesController'
        })

        .when('/profile/:id/', {
            templateUrl : 'pages/profile.html',
            controller: 'profileController'
        })

        .otherwise({redirectTo:'/allprofiles'});
});

App.factory('Allprofiles', function(){
  return [
    {name: "Adam", role: "Photographer", photo: "img/team/2.jpg", id:"1"},
    {name: "John", role: "Musician", photo: "img/team/3.jpg", id:"2"},
    {name: "Sam", role: "Actor", photo: "img/team/1.jpg", id:"3"},
    {name: "Rachel", role: "Web Developer", photo: "img/team/3.jpg", id:"4"},
    {name: "Joe", role: "Dancer", photo: "img/team/2.jpg", id:"5"},
    {name: "Francis", role: "Psychology", photo: "img/team/1.jpg", id:"6"}
  ]
})

App.controller('allProfilesController', function($scope, $route, $location, Allprofiles) {
  $scope.profiles = Allprofiles;
})

App.controller('profileController', function($scope, $route, $location) {

})
Solution

  • You can use $routeParams,

    Retrieve the routerParams in the second controller as,

    app.controller("profileController", function($scope, $routeParams) {
  $scope.id = $routeParams.id;
  $scope.name = $routeParams.name;   
});

    DEMO

    var app = angular.module('demo', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider
    .when('/home', {
      template: "HI this is home Screen",
        controller: 'allProfilesController'
    })
    .when('/profile/:id', {
      templateUrl: "template.html",
      controller: 'profileController'
    })
    .otherwise({
      redirectTo: '/home'
    })
}]);

app.controller("profileController", function($scope, $routeParams) {
  $scope.id = $routeParams.id;
  $scope.name = $routeParams.name;
   
});

app.factory('Allprofiles', function(){
  return [
    {name: "Adam", role: "Photographer", photo: "img/team/2.jpg", id:"1"},
    {name: "John", role: "Musician", photo: "img/team/3.jpg", id:"2"},
    {name: "Sam", role: "Actor", photo: "img/team/1.jpg", id:"3"},
    {name: "Rachel", role: "Web Developer", photo: "img/team/3.jpg", id:"4"},
    {name: "Joe", role: "Dancer", photo: "img/team/2.jpg", id:"5"},
    {name: "Francis", role: "Psychology", photo: "img/team/1.jpg", id:"6"}
  ]
})
app.controller('allProfilesController', function($scope, $route, $location, Allprofiles) {
  $scope.profiles = Allprofiles;
})

 
    <!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="demo" ng-controller="allProfilesController">

  <h3>Hello, </h3>
  <div ng-repeat="profile in profiles">
    <ul>
      <li>{{profile.name}}</li>
      <li><a href="#profile/{{profile.id}}">Detail</a></li>
    </ul>
  </div>
  <hr/>
  <h1 ng-view=""></h1>
</body>

</html>