在 Angular 中加载下一页

Question

我有以下 Angular 和 HTML 代码：

<script type="text/javascript">

  var application = angular.module('Application', []);

  application.service('ImageService', function ($http) {
    return {
      GetList: function () {
        return $http.get('api/images');
      },
    }
  });

  application.controller('ImageController', function ImageController($scope, ImageService) {

    ImageService.GetList()
      .success(function (data, status, headers, config) {
        $scope.images = data;
      })
      .error(function (data, status, headers, config) { });
  });

</script>

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
  <div data-ng-repeat='image in images' class="image">
    <img src="{{image.Url}}" alt="" />
  </div>
</div>

API 调用是 return 调用以下内容：

[
  {"Key":"89207","Url":"http://somedomain.com/image89207.jpg"},
  {"Key":"12321","Url":"http://somedomain.com/image12321.jpg"},
  {"Key":"23434","Url":"http://somedomain.com/image23434.jpg"}
]

我想在用户向下滚动到页面末尾或单击显示 "Show More" 的按钮时加载下一页。

我还需要 return 我的 JSON NextPage 值 ...

要点是，如果当前页面是“233”，那么下一页可能是“4545”。

我认为 API 可能需要 return 下一页值和图像列表。

我该怎么做？

Answer 1

我同意 pankajparkar。你应该处理 'show more' 按钮，加载更多图像并用 $scope.images 加入它。 ng-repeat 将完成剩余的工作。这是代码示例

  <script type="text/javascript">
    var application = angular.module('Application', []);

    application.service('ImageService', function($http) {
      return {
        GetList: function(page) {
          return $http.get('api/images', {
            params: {
              page: page
            }
          });
        },
      }
    });

    application.controller('ImageController', function ImageController($scope, ImageService) {

      var page = 0;

      $scope.images = [];

      var load = function() {
        ImageService.GetList(page)
          .success(function(data, status, headers, config) {
            $scope.images = $scope.images.concat(data);
          })
          .error(function(data, status, headers, config) {});
      };

      load();

      $scope.loadMore = function() {
        page++;
        load();
      }
    });
  </script>

  <div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
    <div data-ng-repeat='image in images' class="image">
      <img src="{{image.Url}}" alt="" />
    </div>
    <div>
      <button ng-click="loadMore()">load more</button>
    </div>
  </div>

在 Angular 中加载下一页

Load Next Page in Angular

angularjs