使用ng-repeat在列表中分页
我正在尝试将页面添加到我的列表中。 我跟着AngularJS教程，关于智能手机，我试图显示只有一定数量的对象。 这是我的html文件：
<div class='container-fluid'> <div class='row-fluid'> <div class='span2'> Search: <input ng-model='searchBar'> Sort by: <select ng-model='orderProp'> <option value='name'>Alphabetical</option> <option value='age'>Newest</option> </select> You selected the phones to be ordered by: {{orderProp}} </div> <div class='span10'> <select ng-model='limit'> <option value='5'>Show 5 per page</option> <option value='10'>Show 10 per page</option> <option value='15'>Show 15 per page</option> <option value='20'>Show 20 per page</option> </select> <ul class='phones'> <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'> <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a> <a href='#/phones/{{phone.id}}'>{{phone.name}}</a> <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> 我已经添加了一些带有一些值的select标签，以限制将要显示的项目的数量。 我现在想要的是添加分页显示下一个5,10等
我有一个控制器，这个工作：
function PhoneListCtrl($scope, Phone){ $scope.phones = Phone.query(); $scope.orderProp = 'age'; $scope.limit = 5; }
而且我也有一个模块为了从json文件中检索数据。
angular.module('phonecatServices', ['ngResource']). factory('Phone', function($resource){ return $resource('phones/:phoneId.json', {}, { query: {method: 'GET', params:{phoneId:'phones'}, isArray:true} }); });
如果你没有太多的数据，你可以通过在浏览器中存储所有的数据并在特定的时间过滤可见的数据来完成分页。
这是一个简单的分页示例： http : //jsfiddle.net/2ZzZB/56/
那个例子是在angular.js github wiki上的小提琴列表，这应该是有帮助的： https ： //github.com/angular/angular.js/wiki/JsFiddle-Examples
编辑： http : //jsfiddle.net/2ZzZB/16/到http://jsfiddle.net/2ZzZB/56/ （如果有45个结果，将不会显示“1 / 4.5”）
我只是做了一个JSFiddle显示分页+search+顺序在每列使用build立与Twitter的Bootstrap代码： http : //jsfiddle.net/SAWsA/11/
我已经build立了一个模块，使内存分页非常简单。
它允许你简单地用dir-paginatereplaceng-repeat ，将每个页面的项目指定为一个pipe道filter，然后以单个指令的forms将控件放在任何你想要的位置， <dir-pagination-controls>
采取Tomarto提出的最初的例子，看起来像这样：
<ul class='phones'> <li class='thumbnail' dir-paginate='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit | itemsPerPage: limit'> <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a> <a href='#/phones/{{phone.id}}'>{{phone.name}}</a> <p>{{phone.snippet}}</p> </li> </ul> <dir-pagination-controls></dir-pagination-controls>
控制器中不需要任何特殊的分页代码。 这一切都由模块内部处理。
演示： http : //plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
来源： GitHub的dirPagination
我知道这个线程现在是老的，但我正在回答它保持一些更新。
使用Angular 1.4或更高版本，您可以直接使用limitTofilter，除了接受limit参数外，还可以接受begin参数。
用法： {{ limitTo_expression | limitTo : limit : begin}} {{ limitTo_expression | limitTo : limit : begin}}
所以现在你可能不需要使用任何第三方库来实现类似分页的function。 我创造了一个小提琴来说明这一点。
看看这个指令： https ： //github.com/samu/angular-table
它自动分类和分页，并给你足够的自由来定制你的表/列表，无论你想要的。
这里是一个演示代码，其中有分页+ AngularJS过滤：
https://codepen.io/lamjaguar/pen/yOrVym
JS：
var app=angular.module('myApp', []); // alternate - https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination // alternate - http://fdietz.github.io/recipes-with-angular-js/common-user-interface-patterns/paginating-through-client-side-data.html app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) { $scope.currentPage = 0; $scope.pageSize = 10; $scope.data = []; $scope.q = ''; $scope.getData = function () { // needed for the pagination calc // https://docs.angularjs.org/api/ng/filter/filter return $filter('filter')($scope.data, $scope.q) /* // manual filter // if u used this, remove the filter from html, remove above line and replace data with getData() var arr = []; if($scope.q == '') { arr = $scope.data; } else { for(var ea in $scope.data) { if($scope.data[ea].indexOf($scope.q) > -1) { arr.push( $scope.data[ea] ); } } } return arr; */ } $scope.numberOfPages=function(){ return Math.ceil($scope.getData().length/$scope.pageSize); } for (var i=0; i<65; i++) { $scope.data.push("Item "+i); } // A watch to bring us back to the // first pagination after each // filtering $scope.$watch('q', function(newValue,oldValue){ if(oldValue!=newValue){ $scope.currentPage = 0; } },true); }]); //We already have a limitTo filter built-in to angular, //let's make a startFrom filter app.filter('startFrom', function() { return function(input, start) { start = +start; //parse to int return input.slice(start); } });
HTML：
<div ng-app="myApp" ng-controller="MyCtrl"> <input ng-model="q" id="search" class="form-control" placeholder="Filter text"> <select ng-model="pageSize" id="pageSize" class="form-control"> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> </select> <ul> <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize"> {{item}} </li> </ul> <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"> Previous </button> {{currentPage+1}}/{{numberOfPages()}} <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-click="currentPage=currentPage+1"> Next </button> </div>
