在 AngularJS 中对 JSON 结果进行分页

Question

我已经构建了一个应用程序，它使用moviedb 数据库来查询当前电影的列表。我得到一个 JSON 对象作为响应，但需要能够对结果进行分页并请求后续页面（例如 http://api.themoviedb.org/3/movie/now_playing&page=2），其中 &page={{nextPage}} 作为查询参数。

我目前有这个作为我的控制器：

app.controller('CustomerController', function($scope, $http, $timeout, $modal, $log) {

$http.get("http://api.themoviedb.org/3/movie/now_playing")
    .success(function(response) {
      console.log(response);
      $scope.page = response.page;
      $scope.results = response.results;
      $scope.currentPage = response.page;
      $scope.pageSize = response.total_pages;
    });

并使用它来显示结果和分页 UI：

<div ng-app="app">

  <div ng-controller="CustomerController">
    <div class="container">
      <div class="row">
        <div ng-repeat="items in results">
          <a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail">
            <img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
            <div class="caption" ng-hide="items.poster_path">
              <h3>{{items.title}}</h3>
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="container"> Page {{currentPage}} of {{pageSize}}
        <button class="btn btn-default" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">Previous</button>
        <button class="btn btn-default" ng-disabled="currentPage >= pageSize - 1" ng-click="currentPage=currentPage+1">Next</button>
      </div>
    </div>
  </div>

如何创建函数以进行后续 API 调用以获取下一页或上一页结果？我假设它应该从分页按钮设置一个动态参数并将其附加到 API 调用 URL 的末尾，但不确定如何实现。

Answer 1

你真的很亲密。您所要做的就是发送额外的参数。

var currentPage = 0;
$http.get("http://api.themoviedb.org/3/movie/now_playing", {
 params: {
  page: currentPage //will be encoded as &page={{currentPage}}
 }
})
 //Use of .success() is deprecated
 .then(function(response) {
   console.log(response);
   $scope.page = response.data.page;
   if(currentPage + 1 < response.data.total_pages)
    currentPage++;
   $scope.results = response.data.results;
   $scope.pageSize = response.data.total_pages;
 });

使用 github api 工作 fiddle

angular.module('myApp', [])
  .controller('myCtrl', function($scope, $http) {
    $scope.page = 0;
    $scope.limit = 3;
  
    var total = -1;
    $scope.total = 0;
  
    function loadPage(page) {
      if(total === -1 || $scope.page * $scope.limit < total && total > 0)
      $http.get('https://api.github.com/search/code', {
        params: {
          q: 'addClass user:mozilla',
          page: page,
          per_page: $scope.limit
        }
      }).then(function(response) {
        $scope.total = total = response.data.total_count;
        $scope.results = response.data.items;
      });
    }

    loadPage(0);

    $scope.prev = function() { 
     if($scope.page - 1 >= 0)
      loadPage(--$scope.page);
    };
    $scope.next = function() { loadPage(++$scope.page) };
  });

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="result in results">
      Name: {{result.name}} <br>
      Repo id: {{result.repository.id}}
      <hr>
    </div>
    <button ng-click="prev()">prev</button>
    <span>{{page}}</span>
    <button ng-click="next()">next</button> <br>
    <span>total: {{total/limit}}</span>
  </div>
</div>

编辑：使用 themoviedb api 工作 fiddle