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

您可以使用立即调用的函数表达式（IFEE）来获取您的stargazer
```
vm.pageCount
```
但您不需要来计算ctrl.pageCount = (function() { return Math.ceil(ctrl.paging.totalItems / ctrl.paging.pageSize); })();并将其放在pageCount下（分页中的页面数量将自动计算），您应该提供它你记录数组的长度反而！

假设您从http获取表格数据total-items，您应该将此数据的长度放在vm.data内，如此

total-items

<强> HTML

     total-items="vm.data.length"

<强> JS

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

我为你做了plunker

编辑1

自版本0.14.0起，指令以ctrl.paging = { pageNumber: 1, pageSize: 10, totalItems: response.length // this is your remote data };

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

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

Answer 2

我做到了！当然，在我的同事:)的指导下。在我的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-1.3.2.min.js的任何地方替换ui-bootstrap-tpls.min.js时，它才能正常工作。
我还删除了计算pageCount的功能。非常感谢 svarog 。

计算AngularJs分页（ui.bootstrap）中的总项目不能正常工作

2 个答案: