Question

我有一个视图，让我们假设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>`

我面临的问题是如何使用行数据导航到其他页面。我尝试使用query string，但对于查询字符串，我的角度停止在该页面上工作。请告诉我是否必须使用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 ，以获取特定用户的详细信息。

然后为get创建一个控制器并显示特定用户的详细信息

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

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

Answer 2

我这样做的方法是：数据应该在控制器或服务中引用，你的ng-click应该是一个链接。与<a ng-href="/user/{{userLoginID}}">details</a>一样。

在您的路线中，您可以创建参数化路线，例如user/:id并在新控制器中使用$routeParams，以了解访问者正在寻找哪个用户，并将该ID传递给您的服务以获取正确的信息

如果你想按照字面意思去做，你可以将这些信息作为get参数传递给你的新路线，但它会更加混乱和不安全。

如何导航到具有关于行表的ng-click的相应数据的其他页面

2 个答案: