限制和偏移数据导致AngularJS for Pagination

ste*_*ing 5 javascript angularjs

AngularJS在调用支持它们的外部数据资源时是否具有Limit和Offset请求方法?

我想有一个比这更优雅的解决方案,我通过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;
  });
}
Run Code Online (Sandbox Code Playgroud)

Jos*_*ler 8

完整的分页解决方案是:(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 );
});
Run Code Online (Sandbox Code Playgroud)

使用同样简单的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>
Run Code Online (Sandbox Code Playgroud)

这是一个完整的Plunker:http://plnkr.co/edit/Mg0USx?p = preview .它使用了ui-bootstrap的分页指令,这是一项正在进行的工作.