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

Question

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

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

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

我的app.js看起来像这样

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>

谁能给我一些建议？

Answer 1

使用 url 中的 $routeprovider 查询参数将 route 配置为接受参数，如下所示

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

现在当您更改视图时，没有名为 $scope.go() 的方法，您必须使用 $location.path() 转到视图并使用 .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**
  }
});

并且在您想要访问索引的其他控制器中，它在 $routeparams 对象中可用，如下所示

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

Answer 2

首先，您需要将控制器分开，因为对于所有路线，您都使用同一个控制器，这不是一个好的做法。你应该使用如下

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

你的控制器应该看起来像

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

LIVE DEMO

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

使用$rootScope

在这里查看我更新的 plunker rootScope DEMO

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

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

angularjs

angularjs-ng-repeat

ng-repeat