Limit and Offset data results in AngularJS for Pagination

后端未结

关注

 3  1228

伪装坚强ぢ

Does AngularJS have Limit and Offset request methods when calling an external data resource that supports them?

I imagine there is a more elegant solution than this,

相关标签:

3条回答

别那么骄傲

2020-12-28 11:38
AngularJs is clientside. It is the external data resource's provider who should support those parameters.

A possible solution for your problem could be $resource (or the 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() {
});
```
Of course, server side will need to read the parameters differently.
0 讨论(0)
发布评论:

提交评论
- 加载中...
情歌与酒

2020-12-28 11:53

I'm not sure I understand your question, but $http methods have a config parameter which is an object, one property of which is the "params" object:

params – {Object.} – Map of strings or objects which will be turned to
?key1=value1&key2=value2 after the url. If the value is not a string, it will be JSONified.

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

离开以前

2020-12-28 11:55

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 );
});

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>

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.

0 讨论(0)