Angularjs 分页是否需要它'；谁有自己的控制器？

对不起，有棱角的新手。我玩了一整天，无法让我的分页对数据做出响应。我的指令和内容之间似乎没有任何联系。我可以将分页信息与页面其余部分使用的控制器放在同一个控制器中吗？我试图将我的对象列表限制在每页五个。我从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>

创建人：{{challenger.challenger}
{{challenge.dateCreated}date:'longDate'}
标题：{{challenge.Title}
下注金额：{challenge.Amount}
描述
{{challenge.description}}
挑战已被{{challenge.challengee}接受并正在进行中

---

感谢您的帮助。

您似乎没有使用uib分页的

ng change

属性，您可能需要将其链接到实际分页需要使用的方法

像这样的,

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

可能您必须将PagedCharlanges绑定到视图

---

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

嘿，谢谢你抽出时间！我想我明白你的意思，但我用的是打字稿。我认为应该采用另一种方法。@ScottVMeyers您可以在控制器类中创建一个方法，并在指令中使用controllerAs将控制器注入视图中。