Angularjs $ http.get內循環

Question

我正在使用angular.js與C＃web服務，我需要增加ng - 重複逐項顯示給用戶，因爲數據更新，做到這一點我試圖在循環中使用$ 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

的主要問題到你的代碼是休耕：你用我作爲指數的成功方法，但不是你所期望的，因爲循環結束，直到你的第一次成功將被調用。

你可以建立在第一階段這樣的要求，是更容易閱讀：

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注入爲依賴注入ction。