Angular中如何将ID传入GET API URL并实现状态跳转

别担心，刚接触Angular的时候对路由参数确实容易懵，我一步步给你讲清楚怎么实现你要的功能：

1. 先配置路由状态（基于ui-router） #

首先你得确保已经引入了ui-router依赖，然后在你的模块配置里定义两个状态：一个是展示卡片的列表状态，另一个是接收ID的详情状态。注意要在详情状态的URL里定义参数（用:参数名的形式）：

angular.module('yourApp', ['ui.router']) // 记得注入ui.router依赖
  .config(function($stateProvider) {
    $stateProvider
      // 列表页面状态（你的卡片展示页）
      .state('itemList', {
        url: '/items',
        templateUrl: 'item-list.html', // 你的卡片视图文件
        controller: 'ItemListController'
      })
      // 详情页面状态（接收ID参数）
      .state('itemDetail', {
        url: '/items/:itemId', // :itemId就是我们要传递的ID参数
        templateUrl: 'item-detail.html', // 详情页视图
        controller: 'ItemDetailController'
      });
  });

2. 在列表视图中绑定点击跳转 #

你用ng-repeat渲染Bootstrap卡片，这里有两种方式实现点击跳转并传递ID：

方式一：用ui-sref指令（更简洁，推荐） #

直接在卡片元素上用ui-sref指令，指定要跳转的状态和参数，不用写控制器方法：

<!-- item-list.html 中的卡片代码 -->
<div class="card mb-3" ng-repeat="item in items">
  <div class="card-body" ui-sref="itemDetail({ itemId: item.ID })">
    <h5 class="card-title">{{item.Name}}</h5>
    <!-- 其他卡片内容 -->
  </div>
</div>

方式二：用ng-click+控制器方法 #

如果需要在跳转前做一些逻辑处理，可以用这种方式：

<!-- item-list.html -->
<div class="card mb-3" ng-repeat="item in items">
  <div class="card-body" ng-click="navigateToDetail(item.ID)">
    <h5 class="card-title">{{item.Name}}</h5>
  </div>
</div>

然后在列表控制器里注入$state，定义跳转方法：

angular.module('yourApp')
  .controller('ItemListController', function($scope, $state, $http) {
    // 第一步：调用第一个API获取列表数据
    $http.get('http://your-first-api-url')
      .then(function(response) {
        $scope.items = response.data; // 把数据绑定到视图的ng-repeat
      });

    // 定义跳转方法
    $scope.navigateToDetail = function(itemId) {
      // 跳转到详情状态，并传递itemId参数
      $state.go('itemDetail', { itemId: itemId });
    };
  });

3. 在详情控制器中获取ID并调用第二个API #

现在到了关键的$stateParams部分，它的作用就是帮你拿到路由状态里传递的参数。在详情控制器中注入$stateParams，然后用它获取ID，再调用第二个API：

angular.module('yourApp')
  .controller('ItemDetailController', function($scope, $stateParams, $http) {
    // 从$stateParams中拿到传递过来的ID
    var currentItemId = $stateParams.itemId;

    // 用这个ID调用第二个API
    $http.get('http://url/' + currentItemId)
      .then(function(response) {
        $scope.itemDetail = response.data; // 把详情数据绑定到视图
      })
      .catch(function(error) {
        console.error('加载详情失败:', error);
      });
  });

补充说明 #

• $stateParams其实就是一个对象，里面的属性对应你在路由URL中定义的参数名（比如我们这里的itemId），所以只要路由里定义了:参数名，就能通过$stateParams.参数名拿到值。
• 记得确保你的Angular模块已经正确注入了ui.router依赖，否则$state和$stateParams都无法使用。
• 如果用的是AngularJS 1.6及以上版本，$http的回调里要通过response.data获取返回的JSON数据，不要直接用response。

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