我在内存中有大约1000项的数据集,并试图创建一个寻呼机 这个数据集,但我不确定怎么做。

我正在使用一个自定义过滤器函数来过滤结果,这工作得很好,但我需要以某种方式获得页数。

有线索吗?


当前回答

我刚刚做了一个JSFiddle,显示分页+搜索+排序每列使用btford代码:http://jsfiddle.net/SAWsA/11/

其他回答

下面解决方法相当简单。

<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示例

这是一个纯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
        };
    }
}

从Angular 1.4开始,limitTo过滤器也接受第二个可选参数begin

从文档中可以看出:

{{limitTo_expression | limitTo: limit: begin}} 开始 (可选) 字符串|数字 开始限制的索引。作为一个负索引,begin表示从输入的末尾开始的偏移量。默认值为0。

所以你不需要创建一个新的指令,这个参数可以用来设置分页的偏移量

ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage" 

我使用这个第三方分页库,它工作得很好。它可以执行本地/远程数据源,并且是非常可配置的。

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

<dir-pagination-controls
    [max-size=""]
    [direction-links=""]
    [boundary-links=""]
    [on-page-change=""]
    [pagination-id=""]
    [template-url=""]
    [auto-hide=""]>
    </dir-pagination-controls>

我曾经多次使用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/