如何让AngularJs UI引导分页处理数据

Question

我从这里使用自定义的分页构建

我不知道如何使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>

有一个分页部分的柱塞示例，但不涉及数据。这里是链接

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此处