ループ内の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

作業の主な問題は、休閑です：あなたは成功の方法でインデックスとして私を使用しますが、あなたの最初の成功が呼び出されるまで、ループが終わったので、あなたが期待したものではありません。

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 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 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を依存性のinjeとして注入することを忘れないでください。 ction。