APIから10データを取得するAngularjsをクリックすると詳細ボタンをクリック

Question

私はangulajsを初めて使用しています。最初に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); 
       }); 
      } 
     }); 

Answer 1

これを行うために。どのページが最後に取得されたのかを把握しておく必要があります。また、新しい画像を$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呼び出されるたびに1（++）によって増加します。このようにして、次に変数loadがこの変数を第1引数として使用して呼び出されると、次のページが検索されます。

ここでは、を使用して$scope.movies配列にHTTP応答の項目を追加しましたが、他の方法を使用して新しい項目をこの配列に追加することができます。