限制和偏移数据导致 AngularJS 用于分页
Posted
技术标签:
【中文标题】限制和偏移数据导致 AngularJS 用于分页【英文标题】：Limit and Offset data results in AngularJS for Pagination 【发布时间】：2012-12-20 01:26:21 【问题描述】：AngularJS 在调用支持它们的外部数据资源时是否有限制和偏移请求方法？
我想有一个比这更优雅的解决方案，我通过 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】：一个完整的分页解决方案是：(1) 与服务器/数据库通信的服务，(2) 处理 next/prev 的指令，以及 (3) 将它们粘合在一起的控制器。
一旦你有了指令和服务，你的控制器就这么简单：
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：
<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 的分页指令，这是一项正在进行的工作。
【讨论】：
如果 API 返回像"data":[],"total":1000 这样的 smt 并且您想使用 ui-boostrap 分页，那么您必须使用 $promise 否则 watch 函数会被触发两次（这是我的理解）。我做了这个plnkr.co/edit/UFKtDXY8dWXEsczoankc，如果您在app.js 中注释代码启用get() 并禁用get().$promise，您将看到该函数如何被调用两次，并且页面将始终为1。 （列表没有变化，因为是伪造的，看页码就行了）
$promise 是$resource 的一个功能，我的回答和问题都没有假设它在使用中。
是的，只是我遇到了这个问题，为什么要搜索使用$resource的解决方案..【参考方案2】：
我不确定我是否理解您的问题，但 $http 方法有一个 config 参数，它是一个对象，其中一个属性是“params”对象：
params – Object. – 字符串或对象的映射，将在 url 之后变为
?key1=value1&key2=value2。如果该值不是字符串，它将被 JSON 化。
如果您的“限制”和“偏移”值在 $routParams 中，那么这似乎是获取它们的好地方。但是，您可能需要考虑将与您的服务器接口的代码包装到 Angular 服务中。该服务可以存储当前限制和偏移值。您可以将服务注入您的控制器，以访问服务提供的功能（和/或数据）。
【讨论】：
感谢您提供的信息，这对您有所帮助。为了澄清，我试图找到最优雅的方式来对来自远程资源的大量数据执行分页。因此，当用户加载页面时，会显示 10 个结果，当他们单击下一步时，会从资源服务器中再提取 10 个结果。 看看这是否有帮助：***.com/questions/10816073/…【参考方案3】：AngularJs 是客户端。应该支持这些参数的是外部数据资源的提供者。
您的问题可能的解决方案是$resource（或params option Mark mentioned）：
var UserAccounts = $resource('/useraccounts/:userId/limit/:limit/offset:offset', userId:'@id');
var accounts = User.get(userId:123, limit:10, offset:10, function()
);
当然，服务器端需要以不同的方式读取参数。
【讨论】：
感谢您的回复。我将澄清我的问题，以便清楚地表明我要求最好的方法是有角度地要求限制/偏移结果。资源提供者确实支持它们。以上是关于限制和偏移数据导致 AngularJS 用于分页的主要内容，如果未能解决你的问题，请参考以下文章