我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。
我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。
有线索吗?
当前回答
我曾经多次使用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/
其他回答
我最近为用Angular构建的站点实现了分页。你可以签出源代码:https://github.com/angular/builtwith.angularjs.org
我会避免使用过滤器来分离页面。您应该在控制器中将这些项分解为页面。
Angular-Paging
是个不错的选择
帮助对大型数据集进行分页的指令,同时要求最少的实际分页信息。在这个分页方案中,我们非常依赖于服务器来“过滤”结果。其核心思想是我们只想保存项目的活动“页”——而不是将整个项目列表保存在内存中并在客户端分页。
这是我的例子。选中按钮在列表中间 控制器。 配置> > >
$scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};
分页逻辑:
/*
Pagination
*/
$scope.$watch('pagination.total', function (total) {
if(!total || total <= $scope.pagination.config.count) return;
_setPaginationPages(total);
});
function _setPaginationPages(total) {
var totalPages = Math.ceil(total / $scope.pagination.config.count);
var pages = [];
var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
var finish = null;
if((start + $scope.pagination.config.size - 1) > totalPages){
start = totalPages - $scope.pagination.config.size;
}
if(start <= 0) {
start = 1;
}
finish = start + $scope.pagination.config.size - 1;
if(finish > totalPages){
finish = totalPages;
}
for (var i = start; i <= finish; i++) {
pages.push(i);
}
$scope.pagination.pages = pages;
}
$scope.$watch("pagination.config.page", function(page){
_setPaginationPages($scope.pagination.total);
_getRespondents($scope.pagination.config);
});
以及我对引导的看法
<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
<li ng-click="pagination.config.page = pagination.config.page - 1"
ng-class="{disabled: pagination.config.page == 1}" ><a href="#">«</a></li>
<li ng-repeat="p in pagination.pages"
ng-click="pagination.config.page = p"
ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
<li ng-click="pagination.config.page = pagination.config.page + 1"
ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">»</a></li>
</ul >
它很有用
下面解决方法相当简单。
<pagination
total-items="totalItems"
items-per-page= "itemsPerPage"
ng-model="currentPage"
class="pagination-sm">
</pagination>
<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) ">
下面是jsfiddle示例
对于那些发现像我一样很难为一个表创建分页器的人,我发布了这个。 所以,在你看来:
<pagination total-items="total" items-per-page="itemPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<!-- To specify your choice of items Per Pages-->
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
</div>
//And don't forget in your table:
<tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >
在你的angularJs中:
var module = angular.module('myapp',['ui.bootstrap','dialogs']);
module.controller('myController',function($scope,$http){
$scope.total = $scope.mylist.length;
$scope.currentPage = 1;
$scope.itemPerPage = 2;
$scope.start = 0;
$scope.setItems = function(n){
$scope.itemPerPage = n;
};
// In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
$scope.pageChanged = function() {
$scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
};
});
//and our filter
module.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});