如何使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页 [英] How can you do server side paging with Angular's UI Bootstrap pagination directive
本文介绍了如何使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我们想要使用 Angular 的 UI Bootstrap 分页指令进行服务器端分页.我们知道如何创建一个 RESTful 端点来从我们的服务器提供页面，但没有看到任何关于如何将该端点与 Angular 的 UI Bootstrap 分页指令挂钩的文档.
解决方案
请看下面的小demo
angular.module('app', ['ui.bootstrap']);angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {$scope.currentPage = 1;$scope.limit= 10;$scope.tracks = [];获取数据()；函数 getData() {$http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&类型=艺术家").then(功能(响应){$scope.totalItems = response.data.artists.totalangular.copy(response.data.artists.items, $scope.tracks)});}//获取页面上的另一部分数据更改$scope.pageChanged = function() {获取数据()；};});<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="样式表"><body ng-app="app"><div ng-controller="PaginationDemoCtrl"><h4>示例服务器分页</h4><pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination><ul><li ng-repeat="track in track" style="list-style:none"><img ng-src="{{track.images[2].url}}" alt="" width="160"/>{{track.name}}