javascript - 变量在for循环中被覆盖

Question

对于每个事件，其地点都不同。但是，当它显示在 UI 上时，所有位置都已被最后一次 API 调用覆盖。我怎样才能阻止这种情况发生？

$scope.eventLoc = '';
    API.get({entity: 'organisation', entity_id: oid, property: 'campaign', property_id:cid, property2:'events'}, function(resp) {
        $scope.orgEvents = resp.data;
        for (i in resp.data) {
            ceid = resp.data[i].CampaignEventID;
            lid = resp.data[i].LocationID;
            API.get({entity: 'location', entity_id: lid}, function(respLocation){
                $scope.eventLoc = respLocation.data;
            })
        }
    });

<li ng-repeat="event in orgEvents track by $index">
    <h2>{{event.Name}}</h2>
    {{eventLoc.Address1}}
</li>

Answer 1

只需将代码更改为如下所示:

//$scope.eventLoc = ''; //this can be removed
    API.get({entity: 'organisation', entity_id: oid, property: 'campaign', property_id:cid, property2:'events'}, function(resp) {
        $scope.orgEvents = resp.data;
        angular.forEach($scope.orgEvents, function(orgEvent) {
            //ceid = orgEvent.CampaignEventID; //this is not being used?
            lid = orgEvent.LocationID;
            API.get({entity: 'location', entity_id: lid}, function(respLocation){
                orgEvent.eventLoc = respLocation.data;
            });
        });
    });

<li ng-repeat="event in orgEvents track by $index">
    <h2>{{event.Name}}</h2>
    {{event.eventLoc.Address1}}
</li>