AngularJS分页只显示一页

Question

我正在使用 angular-ui-bootstrap-tpls 版本：0.14.3 对我从某些数据库中获取的结果进行分页，问题是分页总是看起来像这样：

 << < 1 > >>

无论设置为固定值还是动态值，它始终保持不变。这是我的 html 代码：

<uib-pagination total-items="bigTotalItemsMapfre"
                    ng-model="bigCurrentPageMapfre" max-size="maxSize" class="pagination-sm"
                    boundary-links="true" ng-change="pageChangedMapfre()" id="pagMapfre"
                    first-text="&laquo;" previous-text="&lsaquo;" next-text="&rsaquo;"
                    last-text="&raquo;" style="margin-bottom: 5px; margin-top: 5px;"></uib-pagination>

javascript:

var app=angular.module('app',['ngRoute', 'ui.bootstrap']);


app.controller("ctrl",["$http","$scope","servicio",function($http,$scope,servicio){

         $scope.paginationMapfre = {
            currentPage: 1,
            maxSize: 5,
            totalItems :50
        };

    $scope.init=function(){


    //some petitions to the database
        servicio.load(url_comentarios+"@mapfre_mx'&page="+$scope.paginationMapfre.currentPage).then(function(info){
            $scope.comentariosMapfre=info.data.content; //content to paginate
             $scope.paginationMapfre.totalItems = info.data.totalElements; //total elements

        });




        $scope.pageChangedMapfre = function(){
            servicio.load(url_comentarios+"@mapfre_mx'&page="+$scope.bigCurrentPageMapfre).then(function(info){
                $scope.comentariosMapfre=info.data.content; //update the content with another petition to the DB
            });
        }



    }

}]);

我不确定我错了什么 missing/doing，为什么它不起作用？我正在关注 angular 网站上的代码。 注意：数据库的结果总是大于10，所以应该paginationMapfre.totalItems调用函数时应该更新。

Answer 1

在分页指令中，您将 total-items 设置为 bigTotalItemsMapfre

<uib-pagination total-items="bigTotalItemsMapfre" ...

您是否在任意位置将 bigTotalItemsMapfre 设置为数组长度？

查看控制器的代码应该是：

<uib-pagination total-items="paginationMapfre.totalItems" ...
or 
<uib-pagination total-items="paginationMapfre.length" ...

AngularJS分页只显示一页

AngularJS pagination only shows one page

javascript

angularjs

angular-ui-bootstrap