Home/ Questions/Q 9100749
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T00:56:37+00:00

Does AngularJS have Limit and Offset request methods when calling an external data resource

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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