如何使 AngularJs UI bootstrap 分页处理数据

Question

我正在使用来自 here

的分页自定义构建

我不知道如何使 pagination 按钮与我的数据一起使用。我必须以某种方式过滤它吗？

这是我显示数据的地方：

<div  class="col-xs-12 col-md-4 content appear" ng-repeat="post in filterPosts | filter:searchPost | orderBy: sorting.orderBy:sorting.direction | filter : filterPost track by post.id">

之后，这是分页部分所在的位置：

<div ng-controller="PaginationController" class="col-xs-12" style="height: 50px;">                  
<pagination class="pagination" style="right: 10px; position: absolute; margin: 0px;" total-items="total_items" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>

分页部分有一个plunker示例，但没有涉及数据。这是 link

Answer 1

是的，您需要过滤数据。分页指令只是为您提供了一种向用户展示可能页面列表的方法，并让用户轻松控制当前页面。您需要使用页面大小（默认为 10）和当前页面值来过滤数据并显示正确的页面。

一种方法是添加一个额外的过滤器来帮助跳过：

app.filter('offset', function() {
    return function(input, start) {
        return input.slice(start);
    };
})

然后用limitTo来控制分页

<div class="col-xs-12 col-md-4 content appear"
    ng-repeat="post in filterPosts | filter:searchPost
    | orderBy: sorting.orderBy:sorting.direction
    | filter : filterPost track by post.id
    | offset: (bigCurrentPage - 1) * 10
    | limitTo: 10">

示例JSFiddle here

如何使 AngularJs UI bootstrap 分页处理数据

How to make AngularJs UI boostrap Pagination work with data

angular-ui-bootstrap