2017-03-28 4 views
0

ここでは、Angular.jsのWeb APIからデータを取得するために "$ http.get"リクエストを使用しています。同じウェブAPIを使用してデータを取得および追加する方法Angularjsでリクエストを取得する

API URLにはパラメータ呼び出し「pageNo =」があり、リクエストの負荷が高くなるように各ページ番号のデータを取得するには、そのパラメータの最後に数字を追加する必要があります。

私はスコープ変数($ scope.pageCount)をとり、それをURLと一緒に渡しました。正常に動作しており、レコードのリストを一度に取得できました。

ここでは、スクロールダウン(無限スクロールのように)の残りのデータを取得し、それに既存のデータリストを追加すると仮定します。

同じリクエストからさらに多くのデータを取得することは可能ですか? アプリケーションに「無限スクロール」を追加し、スクロールダウン時に警告を受け取りました。

現在の作業関数は次のとおりです。

app.controller('SpotLightCtrl', function ($scope, $http, shareEventID) { 

    $scope.pageCount = 1; 
    $http.get("https://stg.myapi.svc/pageNo="+$scope.pageCount+) 
     .then(function (response) { 
      $scope.data = response.data; 

      $scope.loadMore = function() { 
       alert('Load more records'); 
      }; 

     }); 

}); 

HTMLコード:

<div class="content-block spotlight-listing" ng-controller="SpotLightCtrl" infinite-scroll='loadMore()' infinite-scroll-distance='1'> 
    <h1>Spotlight</h1> 
    <div ng-repeat="event in data.eventList" class="deals-block"> 
     <div class="col-md-4 col-xs-12 img-style"> 
      <a href="/SpotLight-Detail"><img ng-src="{{event.eventPosterImage}}" class="img-responsive img-rounded" /></a> 
     </div> 
    </div> 
</div> 

任意の詳細は明らかでない場合は共有してください、すべてのヘルプは...

+0

に追加され呼び出されたとき、私はあなたがチェック示唆それを修正してください。 – George

+0

ああ、私は – Ajoshi

+0

右ジョージをチェックさせ、同じものを更新しました。 – Ajoshi

答えて

2

をいただければ幸いあなたは、関数内でHTTP呼び出しを置くことができますし、 pagecountで関数を呼び出します。

app.controller('SpotLightCtrl', function ($scope, $http, shareEventID) { 

$scope.pageCount = 1; 
$scope.data = []; 
function getData() { 
    $http.get("https://stg.myapi.svc/pageNo=" + $scope.pageCount) 
     .then(function (response) { 
      $scope.data = $scope.data.concat(response.data); 
     }); 
} 

$scope.loadMore = function() { 
    console.log('Loading more records'); 
    ++$scope.pageCount; //page count is incremented by 1, so 
    getData(); 
}; 

getData(); 
}); 

loadMore機能がPAGECOUNTが1ずつインクリメントされ、次のレコードがあなたがSOにオーバーJSコピー問題があったかもしれない$ scope.data

+0

感謝して..ありがとう。 – Ajoshi

関連する問題