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

Question

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

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

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

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

http://myserver/endpoint/gytf87hg5d

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

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

 Dubai | ID: hyf53ygt65
 Sri Lanka | ID: gytf87hg5d

Controller 和服务:

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