在 AngularJs 分页（ui.bootstrap）中计算总项目无法正常工作

Question

我使用controllerAs 并避免使用$scope 作为模型。
我想在我的搜索结果中添加分页。我的控制器中有一个分页对象，如下所示，它将与角度服务共享，然后与服务器 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; 时，它可以工作。看来问题是功能。我该如何解决这个问题？ （按钮被禁用，它应该返回 100 页，而不是一个！）

更新：示例Plunker

Answer 1

我做到了！当然，在我同事的指导下 :) 。在我的 plunk (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。

Answer 2

1. 您可以使用立即调用函数表达式 (IFEE) 来获取您的 vm.pageCount，就像这样

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

2. 但是你不需要计算pageCount并放在total-items下（分页的页数会自动计算），你应该提供你的长度而是记录数组！

假设你从 http 获取表数据 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- 为前缀

从 0.14.0 版本开始，我们开始为所有组件添加前缀。如果您是从 ui-bootstrap 0.13.4 或更早版本升级，请查看我们的迁移指南。

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