個々のデータをロードして、角度ジェネレータを使用してすべてのデータをロードして表示する方法はありますか？

Question

私は10の場所があり、それぞれの場所の気象条件を表示する必要があります。すべてのlocationIDを取得し、それを関数に渡して一度に10個の場所のすべてのデータを取得して表示するのは簡単です。しかし、私はサーバー側から個別にロードして角部に送りたい。すなわち、最初の位置データがロードされたときにそれを表示し、次に2番目のように..それは可能ですか？

これは私の角度コードです。これはうまく動作します。私は上記のロジック

var locations = [1,2,3,...,10]; 
locationService.UpdateDashBoard(locations).then(function (result) { 
    $scope.results.push(result.data); 
}); 

に変更すると、あなたの質問に述べたように、あなたのlocationService.UpdateDashBoard機能は、複数のIDを受け入れるかもしれないがHTMLコードがになりますidのリストを渡し、

<li gridster-item="widget" ng-repeat="widget in results"> 
    <div class="text-center wrap-text"> 
     <span ng-show="!editMode">{{ widget.name }}</span> 
     <label style="cursor: move" ng-show="editMode">{{ widget.name }}</label> 
     <div class="pull-right" ng-show="editMode && widget.Source"> 
      Location - {{widget.location}} 
      temperature - {{widget.Source.temperature}} 
     </div> 
    </div> 
</li> 

Answer 1

ですすべてのデータが一度に返されます。個別にそれぞれの場所をロードするためにあなたの条件を考えると、あなたは単にIDごとに一度サービスを呼び出すことができます。

var locations = [1,2,3,...,10];  
locations.forEach(function(location) { 
    locationService.UpdateDashBoard([location]).then(function (result) { 
     $scope.results.push(result.data); 
    }); 
}); 

各呼び出しは、場所のデータが$scope.results配列にプッシュされる応答した後。これは、角度配列の魔法が起きる場所です。ng-repeatディレクティブを結果配列にバインドすると、新しい場所が追加されるたびにUIが自動的に更新されます。

Answer 2

これを正しく理解していれば、すべてのデータを1回のヒット（結果）で取得し、徐々にDOMに追加したいと考えています。私はMS_AUの答えがあなたが必要とする適切な機能を提供するかどうかはわかりません。すべてのIDに対してサーバーを呼び出すように見えますが、配列全体を渡して、毎回サーバーからすべてのデータを返します。 $scope.resultsに100アイテムあります。

編集：あなたの質問の私の理解が正しければ、あなたは1つのIDを受け入れ、IDSを反復処理し、関数を呼び出すために、あなたのサービスメソッドを変更する必要がありますので、IDごとにサーバーを呼び出したいです。

プライベート関数で約束を返す場合は、forEachループ内で.then()を呼び出して結果をプッシュできます。サービス機能で$ promiseを返さない場合は、コントローラの.$promiseを処理する必要があります。

var locations = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
var updateDashboard = function(id) { 
    return locationService.UpdateDashBoard(id); 
}; 
locations.forEach(function(id) { 
    updateDashboard(id).then(function (result) { 
     $scope.results.push(result.data); 
    }); 
}); 

そして、あなたのHTML：

<li gridster-item="widget" ng-repeat="widget in results"> 
    <!-- fade is just an ng-animate class I picked, you can choose your own or none --> 
    <div class="text-center wrap-text fade"> 
    <span ng-show="!editMode">{{ widget.name }}</span> 
    <label style="cursor: move" ng-show="editMode">{{ widget.name }}</label> 
    <div class="pull-right" ng-show="editMode && widget.Source"> 
     Location - {{widget.location}} 
     temperature - {{widget.Source.temperature}} 
    </div> 
    </div> 
</li> 

Answer 3

それはあなたが次々とIDのそれぞれを連結することシーケンシング要求をやってみたかったことのように聞こえます。私はそれを行うために$qを使用することをお勧めします。それはpromiselink関数から解決する約束を待っているので

var locations = [1,2,3,...,10]; 

// create a "start" promise 
var promiseChain = $q.when(function(){}); 

// loop each locations 
locations.forEach(function (location) { 

    // promisify the locationService function 
    var promiselink = function() { 
     var deferred = $q.defer(); 

     locationService.UpdateDashBoard([location]) 
     .then(function (result) { 
      $scope.results.push(result.data); 
      deferred.resolve() 
     }); 

     return deferred.promise; 
    } 

    // promiseChain will wait until promiselink return with the promise 
    promiseChain = promiseChain.then(promiselink); 
}) 

promiseChain.then(promiselink);は、トリックを行う必要があります。