javascript - 如何通过 ng-click 行表导航到包含相应数据的其他页面

Question

我有一个 View ，假设index.cshtml正在使用服务获取数据并显示在表格中，其中每行都可单击。在我单击一行后，它应该导航到其他页面，让我们将其称为 details.html ，并包含特定行的相应信息。

`<table class="table table-bordered table-condensed table-hover table-responsive">
            <thead>
                <tr class="bg-primary">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Role</th>
                </tr>
            </thead>
            <tbody ng-repeat="user in Users">
                <tr ng-click="GetUser(Users,user.userLoginID)" style="cursor:pointer" >
                    <td>{{ user.userLoginID }}</td>
                    <td>{{ user.userName }}</td>
                    <td>{{ user.descOfUser }}</td>
                    <td>{{ user.userRole }}</td>
                </tr>
            </tbody>
        </table>`

我面临的问题是如何导航到包含行数据的其他页面。我尝试使用查询字符串，但对于查询字符串，我的 Angular 停止在该页面上工作。请告诉我是否必须使用 Angular-route 以及如何做到这一点。

Answer 1

更改您的代码，如下所示，并创建链接以获取详细信息，

<tbody>
 <tr ng-repeat="user in Users">
                <td>{{ user.userLoginID }}</td>
                <td>{{ user.userName }}</td>
                <td>{{ user.descOfUser }}</td>
                <td>{{ user.userRole }}</td>
                <td><a href="#/user-details/{{user.userLoginID }}" class="btn">&nbsp;<i class="glyphicon glyphicon-edit"></i>&nbsp; details</td>
            </tr>

之后为details.html页面创建一个路由，

app.config(['$routeProvider',
 function($routeProvider) {
$routeProvider.
  when('/', {
    templateUrl: '/users.html',
    controller: 'listCtrl'
  })
  .when('/user-details/:userLoginId', {
    templateUrl: '/details.html',
    controller: 'detailsCtrl', // this is new controller name
   })
  .otherwise({
    redirectTo: '/'
  });
}]);

现在创建了使用userId作为routeParameter的路由来获取特定用户的详细信息。

然后创建一个 Controller 来获取并显示特定用户的详细信息，

app.controller('detailsCtrl', function ($scope, $location, $routeParams) {
   // call service to get details  
  // get the user id like this "$routeParams.userLoginId"
});

最后在details.html页面中显示详细信息。