view raw
Elnaz Elnaz - 1 year ago 168
HTML Question

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

I use

and avoid using the
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

will be set by server and then be read from response.
My pagination in html:

<pagination total-items="ctrl.pageCount"

I calculate
in controller as below:

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

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

enter image description here

Update: Sample Plunker


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);
                .then(function (response) {
                    vm.result =;
                    // EDITED PART:
                    vm.paging =;

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

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.