如何在 Angularjs 中使用相同的 Web api 获取请求来检索和附加数据答案

【问题标题】：How to retrieve and append data using the same web api get request in Angularjs如何在 Angularjs 中使用相同的 Web api 获取请求来检索和附加数据
【发布时间】：2017-08-21 09:52:27
【问题描述】：

这里我使用“$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>

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

【问题讨论】：

复制你的JS到SO可能有问题，建议你检查并修复它。
哦，让我看看
对，乔治，已经更新了。

标签： javascript angularjs user-interface http-get

【解决方案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 加一，下一条记录追加到 $scope.data

【讨论】：

感谢..谢谢。