CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
Saveriu CIANELLI
Saveriu CIANELLI

Reputation: 550

AngularJS, Ui-BootStrap and pagination

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

Upvotes: 1

Views: 1056

Answers (1)

Shripal Soni
Shripal Soni

Reputation: 2448

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();
                        });
                    };

Upvotes: 1

Related Questions