如何使用 Angular UI Bootstrap 分页指令进行服务器端分页答案

【问题标题】：How can you do server side paging with Angular's UI Bootstrap pagination directive如何使用 Angular UI Bootstrap 分页指令进行服务器端分页
【发布时间】：2016-10-01 04:48:50
【问题描述】：

您好，我们希望使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页。我们知道如何创建一个 RESTful 端点来提供来自我们服务器的页面，但没有看到任何关于如何将该端点连接到 Angular 的 UI Bootstrap 分页指令的文档。

【问题讨论】：

angular-ui.github.io/bootstrap/#/pagination -- 非常详细 - 模型是当前页面，因此每次更改事件，都会向服务器发送一个请求，获取该页面的列表，并将其显示在您的容器中。
感谢您的链接！

标签： angularjs angular-ui-bootstrap

【解决方案1】：

请看下面的小演示

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {

  $scope.currentPage = 1;
 $scope.limit= 10;


  $scope.tracks = [];
  getData();


  function getData() {
    $http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
      .then(function(response) {
        $scope.totalItems = response.data.artists.total
        angular.copy(response.data.artists.items, $scope.tracks)


      });
  }

//get another portions of data on page changed
  $scope.pageChanged = function() {
    getData();
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="app">

  <div ng-controller="PaginationDemoCtrl">
    <h4>Sample Server Pagination</h4>

    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
    <ul>
      <li ng-repeat="track in tracks" style="list-style:none">
<img ng-src="{{track.images[2].url}}" alt="" width="160"/>
{{track.name}}</li>
    </ul>

  </div>
</body>

【讨论】：

该 api 链接不再起作用。请更新它
最新版本的 AngularUI Bootstrap (1.3.2) 使用 <uib-pagination> 指令而不是 <pagination>。
@sylwester 我需要发送请求，例如跳过项目。例如apiUrl?skip=10 表示它将跳过前 10 个。那么如何使用 angular-ui bootstrap 进行操作
@codelearner 将 getData 函数中的请求从 $http.get("ws.spotify.com/search/1/…" + $scope.currentPage) 更改为 apiUrl?skip=$scope.currentPage *10
@sylwester ，最初它的跳过值应该为零。所以如果我将 $scope.currentPage 发送为零。它不会每次都增加

【解决方案2】：

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {

  $scope.currentPage = 1;

  $scope.tracks = [];
  getData();


  function getData() {
    $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=" + $scope.currentPage)
      .then(function(response) {
        $scope.totalItems = response.data.info.num_results
        angular.copy(response.data.tracks, $scope.tracks)


      });
  }

//get another portions of data on page changed
  $scope.pageChanged = function() {
    getData();
  };


});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="app">

  <div ng-controller="PaginationDemoCtrl">
    <h4>Sample Server Pagination</h4>

    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
    <ul>
      <li ng-repeat="track in tracks">{{track.name}}</li>
    </ul>

  </div>
</body>

【讨论】：