限制和偏移数据导致 AngularJS 用于分页 [英] Limit and Offset data results in AngularJS for Pagination
问题描述
AngularJS 在调用支持它们的外部数据资源时是否有 Limit 和 Offset 请求方法?
Does AngularJS have Limit and Offset request methods when calling an external data resource that supports them?
我想有比这更优雅的解决方案，我通过 routeParams 传递限制和偏移量:
I imagine there is a more elegant solution than this, where I am passing the limit and offset via the routeParams:
function ListCtrl($scope, $http, $routeParams) {
$http.jsonp('http://www.example.com/api/list.jsonp?callback=JSON_CALLBACK&limit=' + $routeParams.limit + '&offset=' + $routeParams.offset,{callback: 'JSON_CALLBACK'}).success(function(data) {
$scope.list = data;
});
}
推荐答案
一个完整的分页解决方案是:(1) 一个与服务器/数据库通信的服务，(2) 一个处理 next/prev 的指令，以及 (3) 将其粘合在一起的控制器.
A complete pagination solution is: (1) a service that communicates with the server/database, (2) a directive to handle next/prev, and (3) a controller to glue it together.
一旦你有了指令和服务，你的控制器就这么简单:
Once you have the directive and the service, your controller is as simple as this:
app.controller('MainCtrl', function($scope, myData) {
$scope.numPerPage = 5;
$scope.noOfPages = Math.ceil(myData.count() / $scope.numPerPage);
$scope.currentPage = 1;
$scope.setPage = function () {
$scope.data = myData.get( ($scope.currentPage - 1) * $scope.numPerPage, $scope.numPerPage );
};
$scope.$watch( 'currentPage', $scope.setPage );
});
使用同样简单的 HTML:
With equally simple HTML:
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="item in data">{{item.name}}</li>
</ul>
<pagination num-pages="noOfPages" current-page="currentPage" class="pagination-small"></pagination>
</body>
这是一个完整的 Plunker:http://plnkr.co/edit/Mg0USx?p=preview.它使用了 ui-bootstrap 的分页指令，这是一项正在进行的工作.
Here's a complete Plunker: http://plnkr.co/edit/Mg0USx?p=preview. It uses the pagination directive of ui-bootstrap, which is a work in progress.
这篇关于限制和偏移数据导致 AngularJS 用于分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
