Question

对不起，有角度的新手。我一整天都在玩，不能让我的分页回应数据。我的指令和内容之间似乎没有任何联系。我可以将分页信息放在与页面其余部分使用的控制器相同的控制器中吗？我试图将我的对象列表限制为每页五个。我从JS复制代码并尝试将其转换为typescript，这也可能是一个问题。

这是我的控制器：

export class HomeController {
    public challenges;
    public challengesCompleted;
    //public allCompletedChallenges;
    public totalItems = 1;
    public currentPage = 1;
    public maxSize = 1;
    public bigTotalItems = 1;
    public bigCurrentPage = 1;
    public setPage(pageNo) {
        this.currentPage = pageNo;
    };



    constructor
        (
        private challengeService: MyApp.Services.ChallengeService,
        private $location: angular.ILocationService,
        $routeParams: ng.route.IRouteParamsService
        ) {
        this.challenges = this.challengeService.listChallenges();
        this.challengesCompleted = this.challengeService.list10FinishedChallenges();
        this.maxSize = 5;
        this.bigTotalItems = 5;
        this.bigCurrentPage = 5;

        //this.allCompletedChallenges = this.challengeService.listAllCompletedChallenges();
    }


}

和html：

                <div class="row" ng-repeat="challenge in controller.challenges  | filter: globalSearch">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-6">
                                <h4>
                                    Created By: {{challenge.challenger}}
                                </h4>
                            </div>
                            <div class="col-md-6">
                                <h4>{{challenge.dateCreated  | date: 'longDate'}}</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h4>Title: <b>{{challenge.title}}</b></h4>
                            </div>
                            <div class="col-md-6">
                                <h4>Bet Amount: {{challenge.amount}}</h4>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <h4>
                                    Description
                                </h4>
                                {{challenge.description}}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <a ng-hide="challenge.challengee!=null || !account.isLoggedIn() || account.getDisplayName() == challenge.challenger" href="/acceptChallenge/{{challenge.id}}"><b>ACCEPT THIS CHALLENGE!</b></a>
                                <a ng-show="!account.isLoggedIn() && challenge.challengee == null" href="/login"><b>YOU MUST BE LOGGED IN TO ACCEPT THIS CHALLENGE.</b></a>
                                <p ng-show="challenge.challengee!=null"><b><i>Challenge has been accepted by {{challenge.challengee}} and is in progress.</i></b></p>
                            </div>
                            <div class="col-md-12 linebreak">

            <br />
        </div>
                    </div>
                </div><br /><br />
            </div>
                            <uib-pagination total-items="totalItems" ng-model="controller.currentPage" items-per-page=5 max-size="5" class="pagination-sm" boundary-link-numbers="true">
                            </uib-pagination>

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

感谢您的帮助。

Answer 1

您似乎没有使用uib-pagination的ng-change属性，您可能需要将其链接到需要实际分页的方法

这样的事，

$scope.pageChanged = function(){
    $scope.pagedChallanges = $scope.challanges.splice....
}

可能你必须将pagedChallanges绑定到视图。

但更好的方法是在服务器中进行分页，并在页面更改时向服务器发送调用以获取所需的页面。

分页是否需要它自己的控制器？

1 个答案: