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

问题描述

我使用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! )

更新:示例柱塞

推荐答案

我做到了！当然，在我的同事的指导下:).就像在我的插件(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.min.js的任何地方替换ui-bootstrap-tpls-1.3.2.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)中的总项目无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！