Angularjs 将在ng中单击的元素的索引从一个页面传递到另一个页面

我试图通过从一个页面点击到另一个页面来传递对象的索引，但它不起作用

需要发送的索引中的页面如下所示

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

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

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>

需要将值传递到的页面如下所示

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

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

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>

名称：
日期：
{{$scope.id}
编辑用户

---

有人能给我一些建议吗？

在url中使用

$routeprovider

查询参数来配置

路由

以接受参数，如下所示

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

现在，当您要更改视图时，没有名为

$scope.go（）

的方法，您必须使用它来转到视图，并使用

.search（）

方法添加查询参数

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

在您想要访问索引的另一个控制器中，它在如下所示的对象中可用

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

---

配置

路由

以使用url中的

$routeprovider

查询参数接受参数，如下所示

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

现在，当您要更改视图时，没有名为

$scope.go（）

的方法，您必须使用它来转到视图，并使用

.search（）

方法添加查询参数

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

在您想要访问索引的另一个控制器中，它在如下所示的对象中可用

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

---

首先，您需要分离控制器，因为对于所有路由，您都使用同一个控制器，这不是一个好的做法。您应该按照以下方式使用

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

您的控制器应该看起来像

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

正如我所说，在route参数中传递数据是不安全的。无论如何，还有其他选择，但这也会导致安全问题

使用$rootScope

---

在此处查看我更新的plunker

首先，您需要分离控制器，因为对于所有路线，您都使用同一控制器，这不是一个好的做法。您应该按照以下方式使用

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

您的控制器应该看起来像

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

正如我所说，在route参数中传递数据是不安全的。无论如何，还有其他选择，但这也会导致安全问题

使用$rootScope

---

在这里检查我更新的plunker

是否在配置中添加了

:index

？是否在配置中添加了

:index

？我希望配置文件信息也显示在edituser页面上。但根据您的解决方案，我需要再次进行重新启动呼叫。您到底想要什么？我正在传递id，我有配置文件信息，因此根据id，我希望显示完整的配置文件信息。您应该发出服务请求，然后再次获取数据。因为安全限制。如果在route参数中传递整个对象，则不安全。@Naveen是否有用？我希望配置文件信息也显示在edituser页面上。但根据您的解决方案，我需要再次进行重新启动呼叫。您到底想要什么？我正在传递id，我有配置文件信息，因此根据id，我希望显示完整的配置文件信息。您应该发出服务请求，然后再次获取数据。因为安全限制。如果在route参数中传递整个对象，则不安全。@Naveen是否有用？