嵌套的 ng 重复以在父重复 ID 上重复

Nested ng-repeat to repeat on parent repeats ID

本文关键字：ID 嵌套 ng      更新时间：2023-09-26

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

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

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

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

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

除了几个错别字，你正在做：

$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

相关文章：