Angularjs: dir 分页控件不显示下一页上,即使在页面按钮被按下之后

发布时间: 2017/4/16 2:52:49
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我一直在试图纳入 dir-pagination-controls ,但工作无法显示基于选页的页面。

<div ng-controller="TableController as tc">
    <table>
        <tbody dir-paginate="order in tc.orders | itemsPerPage: 10" total-items="tc.totalOrders" current-page="currentPage">
            <tr ng-click="tc.showOrderDetail(order.id)">
                <td ng-bind="order.id"></td>
                <!-- Simliar lines are here -->
            </tr>
        </tbody>
    </table>
    <dir-pagination-controls 
       boundary-links="true" 
       on-page-change="tc.pageChangeHandler(newPageNumber)" 
       template-url="dirPagination.tpl.html">
    </dir-pagination-controls>
</div>

table 显示我的期望。然而,由此产生的分页控制器不显示下一页,当我按下任何按钮。

这里是有关脚本的一部分。

angular.module('adminAngular', ['ui.bootstrap','dialogs.main','angularUtils.directives.dirPagination'])
.controller('TableController', function($http){

    var instance = this;

    this.orders = [];
    $http({
        //works fine
    }).then(function (response) {
        instance.orders = response.data;
        instance.totalOrders = instance.orders.length;
        //The "instance.orders" gets the expected data, and used for in dir-paginate="order in tc.orders
    });

    this.pageChangeHandler = function(num) {
        console.log('going to page ' + num);
    };

    this.pageChanged = function(newPage) {
        getResultsPage(newPage);
    };

更新pageChangeHandler显示按下哪个按钮,但页面不会改变。(一切都是好)。

此代码基于官方文档和其演示,但我找不到什么是真的错了。

如果你给任何建议,我希望。

解决方法 1:

解决办法是删除 total-items 从你 dir-paginate 指令。 这里是呆瓜用简单的示例。

total-items属性用于当你做异步调用来获取每个页面项目。 所以,第一次异步调用你得到项目的第一页,和当你更改你应该从服务器获取项目为相应的页面的页。 total-items告诉分页指令多少页你有总数,所以它知道如何构建元素。

如果你想调用异步调用的每个页面,则使用 total-items 和你执行 pageChanged 在哪里你做另一个异步调用。

$scope.pageChanged = function(newPage) {
   // get orders for newPage number
   $http.get(...).then(function(response) {
       // orders for newPage number fill the same 'orders' array
       this.orders = response.data
   });
}
官方微信
官方QQ群
31647020