AngularJS嵌套ng-repeat绑定唯一产品价格问题求助

你遇到的问题很典型——因为你把所有游戏的价格都存在全局的$scope.AllPrices里，每次新的请求都会覆盖这个变量，最后所有游戏的价格区域都会显示最后一次请求回来的数据。要解决这个问题，核心思路是把每个游戏的价格和游戏对象本身绑定在一起，而不是用全局变量共享数据。

具体修改步骤 #

1. 调整控制器的价格请求方法

修改getPriceByGame函数，不再将返回的价格数据赋值给全局的$scope.AllPrices，而是直接挂载到当前请求的游戏对象上：

$scope.getPriceByGame = function (game) {
  // 避免重复请求（如果已经加载过价格就跳过）
  if (game.prices?.length) return;

  var request = 'AllPrices/' + game.id_product;
  $http({ method: 'Get', url: uri + request })
    .success(function (data) {
      // 将价格列表绑定到当前game的prices属性
      game.prices = data;
    })
    .error(function() {
      // 错误处理：初始化空数组避免报错
      game.prices = [];
    });
};

2. 更新HTML模板的绑定逻辑

在ng-init中传入完整的game对象，然后嵌套的ng-repeat直接遍历当前游戏的prices属性，而不是全局的AllPrices：

<div ng-repeat="game in AllGames">
  <div>{{game.title}} | {{game.id_product}}</div>
  <div ng-init="getPriceByGame(game)">
    <!-- 遍历当前游戏专属的prices数组 -->
    <div ng-repeat="priceItem in game.prices"> {{priceItem.price}} </div>
  </div>
</div>

3. 可选优化：提前初始化价格数组

为了避免第一次加载时game.prices为undefined导致的潜在问题，可以在获取游戏列表时，给每个游戏预先初始化空的价格数组：

$scope.getAllGames = function () {
  var request = 'Games';
  $http({ method: 'Get', url: uri + request })
    .success(function (data) {
      $scope.AllGames = data;
      // 给每个游戏初始化prices空数组
      $scope.AllGames.forEach(game => {
        game.prices = [];
      });
    })
};

为什么这样能解决问题？ #

每个游戏对象现在都有自己独立的prices数组，不同游戏的价格请求会把数据存到各自的game实例中，不会互相覆盖。这样嵌套的ng-repeat就能准确渲染对应游戏的价格列表了。

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