Question

大家好，新年快乐！

我正在研究AngularJS，将其用于我在公司开发的下一个专业应用程序。

我坚持使用ui-bootstrap模块的分页指令。 total-items属性始终未定义。

在我的示例中，我想要检索论坛并从资源中分页主题。我认为分页指令不适用于延迟值......

你能帮我吗？

这是服务：

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

                };

            }]);

控制器：

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

和html片段：

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

非常感谢

PS：json对象收到了：

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

Answer 1

您的服务结果将作为成功处理程序中的参数。您可以像这样编写init函数：

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

AngularJS，Ui-BootStrap和分页

1 个答案: