限制和偏移数据结果AngularJS为分页

本文介绍了限制和偏移数据结果AngularJS为分页的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

调用是否支持它们外部数据资源时AngularJS有限制和偏移请求方法？

我想有一个更好的解决方案比这个，在这里我传递的限制和偏移通过routeParams：

 功能的ListCtrl（$范围，$ HTTP，$ routeParams）{
$ http.jsonp（'http://www.example.com/api/list.jsonp?callback=JSON_CALLBACK&limit='+ $ routeParams.limit +'和，抵消='+ $ routeParams.offset，{回调： JSON_CALLBACK'}）。成功（功能（数据）{
$ scope.list =数据;
  }）;
}

解决方案

一个完整的分页解决方法是：（1）与服务器/数据库通信的服务，（2）指令，下一个处理/ preV，（3）控制器一起胶水。

一旦你的指令和服务，您的控制器是这样简单：

  app.controller（'MainCtrl'，函数（$范围，MYDATA的）{
  $ scope.numPerPage = 5;
  $ scope.noOfPages = Math.ceil（myData.count（）/ $ scope.numPerPage）;
  $ scope.currentPage = 1;  $ scope.setPage =功能（）{
    $ scope.data = myData.get（（$ scope.currentPage  -  1）* $ scope.numPerPage，$ scope.numPerPage）;
  };  。$ $范围腕表（当前页，$ scope.setPage）;
}）;

使用同样简单的HTML：

 ＆LT;机身NG控制器=MainCtrl＆GT;
  ＆LT; UL＆GT;
    ＆LT;李NG重复=项目数据＆GT; {{item.name}}＆LT; /李＆GT;
  ＆LT; / UL＆GT;
  ＆LT; NUM分页的页面=noOfPages当前页=当前页级=分页小＆GT;＆LT; /分页＆GT;
＆LT; /身体GT;

下面是一个完整的Plunker：。它采用，这是一项正在进行的工作的分页指令。

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

解决方案

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.

这篇关于限制和偏移数据结果AngularJS为分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！