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

Question

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

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

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

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

是否有可能或以任何方式从同一个请求中检索更多数据？我已将 'infinite-scroll' 添加到应用程序并在向下滚动时收到警报。

以下是当前的工作函数

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 调用放在一个函数中，然后使用页数调用该函数。

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 加一，下一条记录附加到 $scope.data

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

How to retrieve and append data using the same web api get request in Angularjs

javascript

user-interface

http-get

angularjs