我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
这是一个纯javascript解决方案,我把它包装成一个Angular服务来实现像谷歌搜索结果那样的分页逻辑。
在http://codepen.io/cornflourblue/pen/KVeaQL/上的CodePen工作演示
细节和解释在这篇博文中
function PagerService() {
// service definition
var service = {};
service.GetPager = GetPager;
return service;
// service implementation
function GetPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
其他回答
jQuery Mobile angular适配器有一个分页过滤器,你可以基于它。
下面是一个使用它的演示小提琴(添加超过5个项目,它就会变成页面):http://jsfiddle.net/tigbro/Du2DY/
来源如下:https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
我最近为用Angular构建的站点实现了分页。你可以签出源代码:https://github.com/angular/builtwith.angularjs.org
我会避免使用过滤器来分离页面。您应该在控制器中将这些项分解为页面。
前面的消息基本上推荐了如何自己构建分页。如果你和我一样,更喜欢一个完整的指令,我刚刚发现了一个很棒的指令,叫做ngTable。它支持排序、过滤和分页。
这是一个非常干净的解决方案,你所需要的是:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
在控制器中:
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
var start = (params.page() - 1) * params.count();
var end = params.page() * params.count();
$defer.resolve(orderedData.slice( start, end));
}
});
GitHub链接:https://github.com/esvit/ng-table/
ng-repeat分页
<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>
<script>
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.push("Item "+i);
}
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>
我曾经多次使用Angular实现分页,对于一些我觉得可以简化的东西来说,这总是有点麻烦。我使用了这里和其他地方介绍的一些想法来创建一个分页模块,使分页变得简单如下:
<ul>
<li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>
// then somewhere else on the page ....
<dir-pagination-controls></dir-pagination-controls>
就是这样。它具有以下特点:
在控制器中不需要自定义代码来将集合项绑定到分页链接。 你不需要使用表格或gridview -你可以对任何你可以重复的东西进行分页! 委托给ng-repeat,所以你可以使用任何可以在ng-repeat中有效使用的表达式,包括过滤、排序等。 跨控制器工作——分页控制指令不需要知道调用paginate指令的上下文的任何信息。
演示:http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview
对于那些正在寻找“即插即用”解决方案的人来说,我想你会发现这篇文章很有用。
Code
代码可以在GitHub上找到,包括一组很好的测试:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
如果你感兴趣,我还写了一篇关于模块设计的小文章:http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/