AngularJS $ http.get循环内

Question

我在C＃Web服务中使用angular.js，我需要逐项增加ng-repeat以在数据更新时向用户显示，为此我尝试在循环内使用$ http.get进行刷新每个项目中的数据。 但是它不起作用

for (var i = 0; i < conditions.length; i++) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: conditions[i][0],
                ConditionDate: conditions[i][1]
            }
        };
        $http.get('application.asmx/getExtFullAssetHealth', configFullAsset)
            .success(function (responseExt) {
                console.log("Element: ", i);
                if (i == 0) 
                {
                    $scope.showData = responseExt;

                    $scope.fullAssetTable_loading = false;
                    $scope.fullAssetTable_loaded = true;
                }
                else
                    $scope.showData = $scope.showData.concat(responseExt);

                //console.log("Data item: ", $scope.showData[i].Tag);

                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
            })
            .catch(function (err) {
                console.log("Error get object: ", err);
            })
            .finally(function () {
                // Hide loading spinner whether our call succeeded or failed.
                //$scope.loading = false;


                $scope.fullData = $scope.showData;
                $scope.filterData(customFilter);
                $scope.fullAssetTable_loading = false;
                $scope.fullAssetTable_loaded = true;

                console.log($scope.fullData);
            });
    }

Answer 1

代码的主要问题是休闲性：您在成功方法中将i用作索引，但并非您所期望的那样，因为循环结束直到调用您的第一次成功为止。

您可以在第一阶段建立这样的请求，更容易阅读：

function buildRequests() {
    return conditions.map(function(condition) {
        var configFullAsset = {
            params: {
                Field: Field,
                SAM_ConnectionString: SAM_ConnectionString,
                TreeElemId: condition[0],
                ConditionDate: condition[1]
            }
        };

        return $http.get('application.asmx/getExtFullAssetHealth', configFullAsset);
    });
}

比您可以处理以下所有请求：

function handleRequests() {
    var requests = buildRequests();
    $q.all(requests)
        .then(handleRequests)
        .catch(function(error) {
            console.log(error);
        })
        .finally(function() {
            $scope.fullData = $scope.showData;
            $scope.filterData(customFilter);
            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        });
}

比遍历每个结果进行更改：

function handleResults(results) {
    results.forEach(function(response, i) {
        console.log("Element: ", i);
        if (i == 0) 
        {
            $scope.showData = response;

            $scope.fullAssetTable_loading = false;
            $scope.fullAssetTable_loaded = true;
        }
        else
            $scope.showData = $scope.showData.concat(response);

        //console.log("Data item: ", $scope.showData[i].Tag);

        $scope.fullData = $scope.showData;
        $scope.filterData(customFilter);
    });
}

不要忘记注入$ q作为依赖项注入。