嵌套 ng-repeat 在父重复 ID 上重复

Question

我正在尝试执行嵌套 ng-repeat（使用 ng-repeat-start 和 ng-repeat-end）。

第一个重复显示位置列表以及关联的 ID。例如：

 Mauritius | ID: po8j3mau72
 Dubai | ID: hyf53ygt65
 Sri Lanka | ID: gytf87hg5d

第二个重复“应该”显示在每个位置花费的一些金额。但是，重复应该使用上述重复中的 _id 并使用在端点中传递的 _id 执行 HTTP.GET，例如

http://myserver/endpoint/gytf87hg5d

我可以让第一个列表出现，并对每个_id执行一个http请求，但我不知道如何显示数量，例如：

 Mauritius | ID: po8j3mau72
 900, 900, 900, 900

 Dubai | ID: hyf53ygt65
 Sri Lanka | ID: gytf87hg5d

控制器和服务：

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, myService) {

  $scope.test = 'hello';

    myService.getItemModel(function(itemModel) {

      $scope.myItem = itemModel;


        var itemList = itemModel.items;
        for (var i = 0; i < itemList.length; i++) {
            var addressId = itemList[i]._id;

            myService.getContentModel(addressId)
                .success(function (data, status, headers, config) {
                    $scope.contents = data;
                    console.log($scope.contents);
                })                    
                .error(function (data, status, headers, config) {

                });
        }
    });

});

app.factory('myService', function($http, $q) {
    return {
        getItemModel: function(itemModel) {
            $http.get('itemID.json')
                .success(function(data) {
                    itemModel(data);
                })
                .error(function(error) {
                    alert('An error occured whilst trying to retrieve your item data');
                });
        },
        getCotnentModel: function(addressId) {
            return $http({
                method: 'GET',
                url: addressID + '.json',
                headers: {'Content-Type': 'application/json'}
            });
        }
    }
});

这是一个笨蛋：https://plnkr.co/edit/oUACLzF5xqNy4pYFSDTg?p=preview

Answer 1

除了几个错别字之外，您正在做的事情是：

$scope.contents = data;

虽然您应该提供不同的数组，但每次重复一个数组。我会为$scope.contents 分配一个空对象，并且每个响应都在不同的键下：

$scope.contents = {};
...
itemList.forEach(function(item) {    
  var addressId = item._id;
  $scope.contents[addressId] = data; 
})

注意：我必须用 forEach 函数替换 for 循环，否则 addressId 将被覆盖并且所有响应都写在同一个键下。

在html中可以写：

...
<ul>
  <li ng-repeat-start="item in myItem.items">
    {{item.addressLine1}} | ID: {{item._id}}
  </li>
  <li ng-repeat-end>
    <div ng-repeat="info in contents[item._id].contentHistory">
      {{info.amount}}
    </div>
  </li>
</ul>
...

这里是更新的 plunked：https://plnkr.co/edit/sYJ0kIpeKwkgVlpGw3es