AngularJS, Ui-BootStrap and pagination

Question

Hi everybody and happy new year!

I'm studying AngularJS to use it for the next professionnal applications that i develop in my company.

I'm stuck with the pagination directive from the ui-bootstrap module. The total-items attribute is always undefined.

In my example i want to retreive a Forum and paginate the Topics from a resources. I think that the pagination directive don't work with defered values...

Can you help me please?

Here is the service:

var serverUrl = "http://localhost:8080/cocoon.backend/webresources";
angular
        .module('cocoonApp')
        .factory('ForumService', ['$resource','$q', function ($resource,$q) {
                return {
                    getForum: function (forumId) {
                        var resource = $resource(serverUrl + '/forum/:forumId', {forumId: '@forumId'});
                        return resource.get({forumId: forumId});
                    },
                    getTopics: function (forumId, page, nbResults) {
                        var resource = $resource(serverUrl + '/forum/:forumId/topic', {forumId: '@forumId'});
                        return resource.query({forumId: forumId,page:page,nbResults:nbResults});
                    }

                };

            }]);

The controller:

angular
    .module('cocoonApp')
    .controller('ForumController',
            ['ForumService', '$stateParams', '$scope', '$log', '$q', function (service, $stateParams, $scope, $log, $q) {

                    $scope.currentForum = {};
                    $scope.topicsToShow = [];
                    $scope.nbTopicsPerPage = 1;
                    $scope.currentPage = 1;
                    $scope.totalItems = 0;

                    $scope.init = function () {
                        $scope.currentForum = service.getForum($stateParams.forumID);
                        $scope.currentForum
                                .$promise
                                .then(function (data) {
                                    $log.log(data);
                                    $scope.totalItems = data.nbTopics;
                                    $log.log('totalItems ' + $scope.totalItems); /*print the good number*/ 

                                })
                                .then(function () {
                                    $scope.loadTopics();
                                });
                    };

                    $scope.loadTopics = function () {
                        $log.log('Page changed to: ' + $scope.currentPage);
                        $scope.topicsToShow = service.getTopics($scope.currentForum.id, $scope.currentPage, $scope.nbTopicsPerPage);
                    };
                }]);

And the html fragment:

<!DOCTYPE html>

<div class="content" ng-controller="ForumController" ng-init="init()">


    <div class="content" >


        <a ui-sref="forum({forumID:currentForum.parent.id})"> 
            <h2>
                <i class="icon-arrow-left"></i>
                {{currentForum.parent.title}}        
            </h2>
        </a>

        <h1>
            {{currentForum.title}}        
        </h1>

        <div ng-repeat="child in currentForum.sousForums" >
            <a ui-sref="forum({forumID:{{child.id}}})">
                <h2>
                    <i class="icon-arrow-right"></i>
                    {{child.title}}        
                </h2>

            </a>
        </div>
    </div>


    <div class="container">
        <h4>{{currentForum.nbTopics}} Topics</h4>
        <table class="table-responsive table-topics">
            <thead>
                <tr>
                    <th>
                        Id
                    </th>
                    <th>  
                        Topic
                    </th>
                    <th>
                        Autor
                    </th>
                    <th>
                        Nb messages
                    </th>
                    <th>
                        Last message
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr topic-summary ng-model="topicsToShow" ng-repeat="topic in topicsToShow"></tr>
            </tbody>
        </table>
        <pagination total-items="totalItems"  ng-model="currentPage" ng-change="loadTopics()" ></pagination>

    </div> 

</div>

Thanks a lot

PS: The json object recieved:

{"type":"forumDTO","id":4,"parent":{"type":"forumDTO","id":3,"sousForums":[],"title":"Forum"},"nbTopics":3,"sousForums":[],"title":"MANGAS"}

Are your getting any value for $scope.currentForum.nbTopics in your success handler where you are assigning that value to $scope.totalItems? — Shripal Soni
– Shripal Soni, Commented Jan 7, 2015 at 14:04
Yes i get the real number i need. If i print it in the then() method, i get the good value. It seems that the directive is processing before the end of the then() and i don't know how to make it waits. — Saveriu CIANELLI
– Saveriu CIANELLI, Commented Jan 7, 2015 at 14:35

Shripal Soni · Accepted Answer · 2015-01-07 14:52:31Z

1

Your result from the service will come as an argument in success handler. You can write your init function like this:

                  $scope.init = function () {
                        $scope.currentForum = service.getForum($stateParams.forumID);
                        $scope.currentForum
                                .$promise
                                .then(function (result) {
                                    $scope.totalItems = result.nbTopics;
                                }).then(function () {
                            $scope.loadTopics();
                        });
                    };

answered Jan 7, 2015 at 14:52

Shripal Soni

2,44819 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Saveriu CIANELLI Over a year ago

I already tried this. I'll edit my post to include your proposition.

Saveriu CIANELLI Over a year ago

Perhaps the $scope inside the then() isn't the same as the controller's $scope.

Shripal Soni Over a year ago

Ideally it should not but if somewhere a new scope is getting created in you code, can you create a wrapper object like $scope.wrapper = {totalItems: 0} and in your html write total-items="wrapper.totalItems" and assign $scope.wrapper.totalItems = data.nbTopics in your success handler . Can you try this once?

Saveriu CIANELLI Over a year ago

This points also that's the same &scope indeed. I'm a noob in Angularjs, it s my first try. I hope I haven't miss something in my code...

Saveriu CIANELLI Over a year ago

If I force in the init $scope.totalItems = 50; this value is taken into account. This shows that the pagination directive initialises itself before the end of the ng-int of the controller.

Collectives™ on Stack Overflow

AngularJS, Ui-BootStrap and pagination

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related