pass index of element clicked in ng repeat from one page to other

Question

I'm trying to pass index of object by clicking from one page to other but it's not working.

The page from index that need to be sent looks like this

  <div><table>
    <tr data-ng-repeat="profile in profiles">
    <td>{{profile.profileName}}</td><td>{{profile.created}}</td>
    <td>{{$index}}
    <button data-ng-click="showUser($index)" type="button" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-pencil"></span> Edit </button>
    </table>
</div>

My app.js looks like this

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

app.config(['$routeProvider', function ($routeProvider){
    $routeProvider
    .when("/", {
        templateUrl : "view/Home.html",
        controller : "MainCtrl"
    })
    .when("/NewUser", {
        templateUrl : "view/addUser.html",
        controller : "MainCtrl"
    })
    .when("/ViewUsers", {
        templateUrl : "view/ViewUsers.html",
        controller : "MainCtrl"
    })
    .when("/EditUser", {
        templateUrl : "view/EditUser.html",
        controller : "MainCtrl"
    });
}]);


app.controller('MainCtrl',function($scope,Restangular,$location){
    Restangular.setBaseUrl('webapi');
    var profiles = Restangular.all('profiles');
    $scope.selected;
    // This will query /profiles and return a promise.
    profiles.getList().then(function(profiles) {
      $scope.profiles = profiles;    
      $scope.saveUser=function(){
          $scope.profile.profileName=$scope.profile.firstName+$scope.profile.lastName;
          console.log($scope.profile);
          profiles.post($scope.profile);
     }

      $scope.showUser=function(id){
          console.log(id);
          $scope.selected=id;
          $scope.go('/EditUser');
      }
      $scope.editUser=function(id){
          console.log(id);
          var profile=$scope.profiles[id];
          console.log(profile);
          profile.put();
      }
    });




      $scope.go = function ( path ) {
          $location.path( path );
        };
});

and page to which value need to be passed look like this

name:<input data-ng-model="profiles[id].profileName" type="text">
date:<input type="text" data-ng-model="profiles[id].created" readonly="readonly">
{{$scope.id}}
<button data-ng-click="editUser(id)">Edit User</button>

Can anyone give me some advice?

Supradeep · Answer 1 · 2017-01-14T06:12:51.993

Configure the route to accept param using $routeprovider query params in the url as shown below

.when("/ViewUsers:index", {
    templateUrl : "view/ViewUsers.html",
    controller : "MainCtrl"
});

And now when you to change the view, there is no method called $scope.go() you have to use $location.path() to go the view and use .search() method to add the query param.

app.controller('MainCtrl', function ($scope, $location){
  $scope.showUser=function(id){
      console.log(id);
      $scope.selected=id;
      $location.path('/EditUser/').search({index: id});  // this will create the url as **/EditUser/?index=id**
  }
});

And in other controller where you want to access the index, it is available in the $routeparams object as shown below

app.controller('EditCtrl', function ($scope, $routeParams){
  var index = $routeParams.index;   //This has the value passed from the other controller
});

Did you add `:index` in the config ? – Supradeep Jan 14 '17 at 06:17 — Supradeep, Jan 14 '17 at 06:17

Aravind · Accepted Answer · 2017-01-14T07:00:54.460

0

First, you need to separate the controllers because for all route you are using the same controller which is not a good practice. You should be using as below

.when("/ViewUsers/:id", {
    templateUrl : "view/ViewUsers.html",
    controller : "ViewUserCtrl"
});

Your controller should look like

app.controller('ViewUserCtrl', function ($scope, $routeParams){
  var id = $routeParams.id;   
});

LIVE DEMO

As I said, passing the data in the route parameter is not safe. How ever there are other alternatives but this will also lead to security issue.

Using $rootScope

Check my updated plunker here rootScope DEMO

edited Jan 14 '17 at 07:00

answered Jan 14 '17 at 05:59

Aravind

40,391
16
91
110

I want profile info to be displayed on edituser page also. but according to your solution I hv to again make a restangular call. – Naveen Jan 14 '17 at 06:20
what is that you exactly want? – Aravind Jan 14 '17 at 06:30
I'm passing id and I have profile info so based on id I want to show complete profile information. – Naveen Jan 14 '17 at 06:35
you should make a service request and get the data again. Because of security constraints. if you pass the entire object in the route parameter it is not safe. – Aravind Jan 14 '17 at 06:53
@Naveen was it helpful? – Aravind Jan 17 '17 at 11:35
yes it was helpful. Can you tell me where I can learn insights of angular like security constraint you mention . – Naveen Jan 18 '17 at 09:24
Security as in? What exactly you are looking for list of few sample security – Aravind Jan 18 '17 at 09:29
From where I can understand things like this"pass the entire object in the route parameter it is not safe" and advance learning of angular – Naveen Jan 18 '17 at 09:45
Aravind and @suzo thanks for helping me out. I already upvoted. Once my reputation will be more than 15, my upvote will became public. – Naveen Jan 18 '17 at 11:03

pass index of element clicked in ng repeat from one page to other

2 Answers2