在 AngularJs 分页 (ui.bootstrap) 中计算总项目数无法正常工作 [英] Calculating total-items in AngularJs Pagination (ui.bootstrap) doesn't work correctly

问题描述

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

I use controllerAs and avoid using the $scope as a model.
I want to add pagination in my search result. I have a paging object in my controller as below, which will be shared with angular service and then with the server API.

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

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

totalCount will be set by server and then be read from response. My pagination in 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 如下:

I calculate pageCount in controller as below:

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

但它不起作用.当我设置 vm.pageCount = 1000; 它工作.看来问题出在功能上.我该如何解决这个问题?(按钮被禁用，它应该返回 100 页，而不是一页！)

But it doesn't work. when I set vm.pageCount = 1000; it works. It seems the problem is the function. How can I fix this problem? (the buttons are disabled and It should return 100 pages, not one! )

更新:示例 Plunker

推荐答案

我做到了！当然，在我同事的指导下:).就像在我的 plunk (script.js) 中一样，我没有在响应之后初始化 vm.paging 对象，因此计算基于 vm.paging 中的默认值.由于 totalCount 为 0，因此除法结果始终为 1，而我只有一页.所以我编辑了 vm.find 主体如下:

I did it! Of course, with the guidance of my colleague :) . As in my plunk (script.js), I hadn't Initialized the vm.paging object after the response, so the computing was based on default values in vm.paging. Since totalCount was 0, always the Division result was 1 and I had just one page. So I edited the vm.find body as below:

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.

And also, I couldn't take advantages of uib-pagination, but when I replaced ui-bootstrap-tpls-1.3.2.min.js anywhere I was using ui-bootstrap-tpls.min.js before, it works correctly.
Also I removed the function of computing pageCount. With many thanks to svarog.

这篇关于在 AngularJs 分页 (ui.bootstrap) 中计算总项目数无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！