Javascript 每次点击Angularjs中的Load more按钮，从API获取10个数据

我是angulajs的新手，最初我需要加载前10张照片，点击加载更多按钮后，我需要加载另外10张照片

我在以下方面做了一些工作：

var app = angular.module("app", []);

        app.controller("HttpGetController", function ($scope, $http) {

            $http.get('https://reqres.in/api/users?page=1&per_page=6').then(
                function (response) {                   
                    $scope.movies = response.data.data;
                    console.log($scope.movies);
            });

            $scope.loadMore = function() {
               $http.get('https://reqres.in/api/users?page=1&per_page=6').then(
                function (response) {                   
                    $scope.movies = response.data.data;
                    console.log($scope.movies);
                });
            }
        }); 

---

为了做到这一点。您必须跟踪最后检索到的页面。您还必须将新图像添加到

$scope.movies

以下是一个例子：

app.controller("HttpGetController", function ($scope, $http) {

    $scope.movies = [];
    $scope.currentPage = 1;
    $scope.itemsPerPage = 10;

    function load(page, count){
        $http.get("https://reqres.in/api/users?page=" + page + "&per_page=" + "count").then(
        function (response) { 
            Array.prototype.push.apply($scope.movies, response.data.data);
        });
    }

    load($scope.currentPage++, $scope.itemsPerPage);        

    $scope.loadMore = function() {
       load($scope.currentPage++, $scope.itemsPerPage); 
    }
}); 

如您所见，每次调用

load

方法时，

$scope.currentPage

都会增加一个（

++

）。这样，下次使用此变量作为第一个参数调用

load

，将检索下一页

---

在这里，我使用了

Array.prototype.push.apply…

将HTTP响应中的项附加到

$scope.movies

数组中，但您可以使用任何其他方法将新项附加到该数组中。

$scope.movies=$scope.movies.concat（response.data.data）；