Question

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

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

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

第二次重复＆＃39;应该＆＃39;显示在每个位置花费的一些金额。但是，重复应该使用上面重复的_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>
...

这是更新的内容：https://plnkr.co/edit/sYJ0kIpeKwkgVlpGw3es

嵌套的ng-repeat重复父重复ID

1 个答案: