javascript - 如何在 Angularjs 中使用相同的 Web api get 请求检索和附加数据

Question

这里我使用“$http.get”请求从 Angular.js 中的 Web API 检索数据。

API URL 有一个参数调用“pageNo=”，需要在该参数末尾添加一个数字来检索相应页码的数据，以维持繁重的请求负载，每个页面有 10 条记录列表。

我获取了一个范围变量 ($scope.pageCount) 并将其与 URL 一起传递，它工作正常并且能够一次检索 10 个记录列表。

现在我应该在向下滚动时获取其余数据(例如使用无限滚动)并将其附加到现有数据列表中。

是否有可能或有什么方法可以从同一请求中检索更多数据？我已将“无限滚动”添加到应用程序中，并在向下滚动时收到警报。

以下是当前的工作功能。

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>

如果有任何细节不清楚，请分享，任何帮助将不胜感激......

Answer 1

您可以将 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，并且下一条记录将附加到 $scope.data