使用ng-routes开发应用：如何将参数传入URL供详情页取值

没问题，我来帮你把列表里的ID传到URL，让详情页能拿到对应的数据。咱们一步步来：

1. 配置带参数的路由 #

首先你得在路由配置里定义详情页的路由，把ID作为URL参数。假设你已经注入了ngRoute模块，修改你的路由配置代码：

angular.module('yourApp', ['ngRoute'])
  .config(function($routeProvider) {
    $routeProvider
      // 列表页路由（你原来的路由，可能已经存在）
      .when('/', {
        templateUrl: 'list.html',
        controller: 'ListCtrl'
      })
      // 详情页路由，:id是动态参数占位符
      .when('/detail/:id', {
        templateUrl: 'detail.html',
        controller: 'DetailCtrl'
      })
      .otherwise({redirectTo: '/'});
  });

2. 修改列表页HTML，添加带ID的跳转链接 #

在你现有的ng-repeat结构里，给需要跳转的元素（比如ID或名称）加上ng-href指令，把ID拼到URL路径中：

<tbody>
  <tr ng-repeat="a in fill">
    <th>{{a.Id}}</th>
    <th>
      <!-- 把名称做成跳转链接，指向带ID的详情页 -->
      <a ng-href="#/detail/{{a.Id}}">{{a.Name}}</a>
    </th>
    <!-- 其他列内容... -->
  </tr>
</tbody>

这里用ng-href而非普通href，是为了避免页面初始加载时Angular还未解析表达式，出现无效的#/detail/{{a.Id}}链接。

3. 在详情页控制器中获取ID并请求数据 #

接下来创建详情页的控制器，注入$routeParams来提取URL中的ID，再调用API获取对应的数据：

angular.module('yourApp')
  .controller('DetailCtrl', function($scope, $http, $routeParams) {
    // 获取URL里的ID参数
    var itemId = $routeParams.id;
    
    // 根据ID请求详情数据
    function getDetailData() {
      $http.get('/api/info/' + itemId)
        .then(function(response) {
          $scope.itemDetail = response.data;
          // 这里可以处理详情数据，比如渲染到页面
        })
        .catch(function(error) {
          console.error('获取详情失败:', error);
        });
    }
    
    // 页面加载时自动调用获取数据函数
    getDetailData();
  });

补充说明 #

• 确保你的后端API支持根据ID获取单条数据的接口（比如/api/info/:id），如果还没实现，需要后端配合调整。
• 记得把你现有的getData函数放到列表页对应的控制器（比如上面的ListCtrl）里，确保$scope.fill能正确绑定列表数据。

这样整个流程就通了：列表页点击条目跳转到带ID的详情页，详情页通过$routeParams拿到ID，再请求对应的数据~

内容的提问来源于stack exchange，提问作者Chuck Villavicencio