计算 AngularJs 分页 (ui.bootstrap) 中的总项目无法正常工作

Question

我使用 controllerAs 并避免使用 $scope 作为模型。
我想在我的搜索结果中添加分页。我的控制器中有一个分页对象，如下所示，它将与 angular 服务共享，然后与服务器 API 共享。

 vm.paging = {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 0
    };

totalCount 将由服务器设置，然后从响应中读取。我的分页在 html:

  <pagination total-items="ctrl.pageCount"
              items-per-page="ctrl.paging.pageSize"
              ng-model="ctrl.paging.pageNumber"
              class="pagination-sm"
              boundary-links="true"
              ng-change="ctrl.find()">
              </pagination>

我在控制器中计算 pageCount 如下：

vm.pageCount = function () {
        return Math.ceil(vm.paging.totalCount / vm.paging.pageSize);
    };

但是没用。当我设置 vm.pageCount = 1000; 时它起作用了。看来问题是功能。我该如何解决这个问题？（按钮被禁用，它应该 return 100 页，而不是一页！）

更新：样本Plunker

Answer 1

您可以使用立即调用的函数表达式 (IFEE) 使您的 vm.pageCount 像这样

ctrl.pageCount = (function() {
    return Math.ceil(ctrl.paging.totalItems / ctrl.paging.pageSize);
})();

但是不需要计算pageCount放在total-items下面（分页的页数会自动计算），您应该改为提供记录数组的长度！

假设你从 http 得到 table 数据 vm.data，你应该把这个数据的长度放在 total-items 里面，像这样

     total-items="vm.data.length"

HTML

    <uib-pagination total-items="ctrl.paging.totalItems"
          items-per-page="ctrl.paging.pageSize"
          ng-model="ctrl.paging.pageNumber"
          class="pagination-sm"
          boundary-links="true"
          ng-change="ctrl.find()">
          </uib-pagination>

JS

    ctrl.paging = {
        pageNumber: 1,
        pageSize: 10,
        totalItems: response.length // this is your remote data
    };

我为你做了这个plunker

编辑 1

自版本 0.14.0 起，指令以 uib-

为前缀

Since version 0.14.0 we started to prefix all our components. If you are upgrading from ui-bootstrap 0.13.4 or earlier, check our migration guide.

所以你也应该使用 uib-pagination（而不是 pagination），因为你的 plunk 使用的是 1.3.2 版本。

Answer 2

我做到了！当然，在我同事的指导下 :) 。正如我的笨蛋（script.js），我没有在响应后初始化vm.paging对象，所以计算是基于vm.paging中的默认值。由于 totalCount 为 0，除法结果始终为 1，而我只有一页。所以我编辑了 vm.find 正文如下：

vm.find = function () {
            vm.result.length = 0;     
vm.findingPromise = myService.find(vm.filter, vm.paging);
            vm.findingPromise
                .then(function (response) {
                    vm.result = response.data.result;
                    // EDITED PART:
                    vm.paging = response.data.paging;
                    //   

                }, function (response) {
                    var r = response;
                    ngNotify.set('Some problems occurred!',
                        {
                            type: 'error',
                            position: 'top',
                            sticky: true
                        });
                });

而且，我无法利用 uib-pagination，但是当我在之前使用 ui-bootstrap-tpls.min.js 的任何地方替换 ui-bootstrap-tpls-1.3.2.min.js 时，它可以正常工作。
另外我去掉了计算pageCount的功能。非常感谢 svarog.

计算 AngularJs 分页 (ui.bootstrap) 中的总项目无法正常工作

Calculating total-items in AngularJs Pagination (ui.bootstrap) doesn't work correctly

html

pagination

angular-ui-bootstrap