javascript 限制和偏移数据导致 AngularJS 用于分页
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14176936/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Limit and Offset data results in AngularJS for Pagination
提问by sterling
Does AngularJS have Limit and Offset request methods when calling an external data resource that supports them?
AngularJS 在调用支持它们的外部数据资源时是否有 Limit 和 Offset 请求方法？
I imagine there is a more elegant solution than this, where I am passing the limit and offset via the routeParams:
我想有比这更优雅的解决方案，我通过 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;
});
}
回答by Josh David Miller
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.
一个完整的分页解决方案是：(1) 与服务器/数据库通信的服务，(2) 处理 next/prev 的指令，以及 (3) 将它们粘合在一起的控制器。
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 );
});
With equally simple HTML:
使用同样简单的 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>
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.
这是一个完整的 Plunker：http://plnkr.co/edit/Mg0USx?p=preview 。它使用ui-bootstrap的分页指令，这是一项正在进行的工作。
回答by asgoth
AngularJs is clientside. It is the external data resource's provider who should support those parameters.
AngularJs 是客户端。应该支持这些参数的是外部数据资源的提供者。
A possible solution for your problem could be $resource(or the params option Mark mentioned):
您的问题的可能解决方案可能是$resource（或Mark 提到的params 选项）：
var UserAccounts = $resource('/useraccounts/:userId/limit/:limit/offset:offset', {userId:'@id'});
var accounts = User.get({userId:123, limit:10, offset:10}, function() {
});
Of course, server side will need to read the parameters differently.
当然，服务器端需要以不同的方式读取参数。
回答by Mark Rajcok
I'm not sure I understand your question, but $http methods have a configparameter which is an object, one property of which is the "params" object:
我不确定我是否理解你的问题，但 $http 方法有一个config参数，它是一个对象，它的一个属性是“params”对象：
params– {Object.} – Map of strings or objects which will be turned to
?key1=value1&key2=value2after the url. If the value is not a string, it will be JSONified.
params– {Object.} – 将
?key1=value1&key2=value2在 url 之后转向的字符串或对象的映射。如果该值不是字符串，它将被 JSON 化。
If your "limit" and "offset" values are in $routParams, then that seems like a fine place to get them from. However, you may want to consider wrapping the code that interfaces with your server into an Angular service. This service could store the current limit and offset values. You can inject the service into your controllers to get access to the functions (and/or data) that the service provides.
如果您的“限制”和“偏移”值在 $routParams 中，那么这似乎是获取它们的好地方。但是，您可能需要考虑将与服务器接口的代码包装到 Angular 服务中。该服务可以存储电流限制和偏移值。您可以将服务注入控制器以访问服务提供的功能（和/或数据）。
