Javascript AngularJS-具有类似Google的逻辑的分页示例

我已尝试实现我从以下链接在线找到的分页解决方案：

我认为问题在于函数的调用方式，因为setPage函数在我拥有所有数据之前就被调用了，所以它不知道总共要显示多少项等。有人可以快速查看一下，看看我做错了什么吗

function HistoryController($window, $scope, $modal, $state, toaster, PagerService, HistoryFactory, $timeout) {
    var vm = this;

    vm.uploads = [];
    vm.includeCancelled = false;
    vm.uploadDataModal = {};
    vm.pager = {};

    vm.setPage = setPage;

    activate();

    function activate() {
        getHistory();
        vm.setPage(1);
    }

    function setPage(page) {
        if (page < 1 || page > vm.pager.totalPages) {
            return;
        }

        // get pager object from service
        vm.pager = PagerService.GetPager(vm.uploads.length, page);

        // get current page of items
        vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
    }

    function getHistory() {
        HistoryFactory.getHistory(vm.includeCancelled).then(
            function(response) {
                _.each(response.data, function(upload) {
                    upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1;
                });
                vm.uploads = response.data;

                if($state.params.reupload){
                    uploadProductionData();
                    $state.params.reupload = false;
                }
            });
    }

函数HistoryController（$window、$scope、$modal、$state、toaster、PagerService、HistoryFactory、$timeout）{
var vm=这个；
vm.uploads=[]；
vm.includeCancelled=false；
vm.uploadDataModal={}；
vm.pager={}；
vm.setPage=setPage；
激活（）；
函数激活（）{
getHistory（）；
vm.setPage（1）；
}
函数设置页（第页）{
如果（页面<1 | |页面>vm.pager.totalPages）{
返回；
}
//从服务获取寻呼机对象
vm.pager=PagerService.GetPager（vm.uploads.length，page）；
//获取项目的当前页面
vm.items=vm.uploads.slice（vm.pager.startIndex，vm.pager.endIndex+1）；
}
函数getHistory（）{
getHistory（vm.includeCancelled），然后(
功能（响应）{
_.每个（响应、数据、功能（上传）{
upload.inProgress=upload.status&['inProgress'，'NEW'].indexOf（upload.status.statusCd.trim（））>-1；
});
vm.uploads=response.data；
如果（$state.params.reupload）{
上传ProductionData（）；
$state.params.reupload=false；
}
});
}

这是html

<div class="chrthdr" ui-view="header"></div>
<div id="userResults">
<div class="card card-full-width">
    <div class="card-header dark-blue">
        <a class="card-config" data-toggle="uploadHistory" data-placement="left"><i class="glyphicon glyphicon-info-sign"></i></a>
        <div class="card-title">Data History</div>
    </div>
    <div class='form-horizontal range-date' style="overflow-y: auto;">
        <form>
            <div class="panel-body">
                <div>
                    <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px;  margin-right: 5px" type="button" ng-click="vm.uploadProductionData()">Upload Data</span>
                    <label>
                        <input type="checkbox" ng-model="vm.includeCancelled">Include removed executions
                    </label>
                    <!--<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-left: 5px" type="button" ng-click="vm.viewTemplates()">Download Template</span>-->
                </div>
                <div>
                    <table class="table">
                        <tr>
                            <th>Upload Date</th>
                            <th>Product</th>
                            <th>Comments</th>
                            <th>Template</th>
                            <th>Last Updated By</th>
                            <th>Last Updated</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true">
                            <td style="white-space: nowrap;">{{upload.uploadDate}}</td>
                            <td>{{upload.product}}</td>
                            <td style="white-space: nowrap;">{{upload.comments}}</td>
                            <td style="white-space: nowrap;">{{upload.templateName}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdatedByUser}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdateDate}}</td>
                            <td style="white-space: nowrap;">{{upload.status.statusName}}</td>
                            <td>
                                <button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statusCd === 'NEW' || upload.status.statusCd === 'ERROR'" ng-click="vm.loadStagingPage(upload.dataLoadExecutionId, upload.product, upload.status)">View</button>
                                <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.cancelDataExecution(upload.dataLoadExecutionId)" ng-show="upload.inProgress || upload.status.statusCd === 'ERROR'">Remove</span>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="text-center">
                   <ul ng-if="vm.pager.pages.length" class="pagination">
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(1)">First</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
                        </li>
                        <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
                            <a ng-click="vm.setPage(page)">{{page}}</a>
                        </li>               
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
                        </li>
                    </ul>
                </div>
            </div>
        </form>
    </div>
</div>

数据历史
上传数据
包括删除的执行
上传时间
产品
评论
模板
最后更新人
最后更新
地位
行动
{{upload.uploadDate}
{{upload.product}
{{upload.comments}}
{{upload.templateName}
{{upload.lastUpdatedByUser}}
{{upload.lastUpdateDate}
{{upload.status.statusName}
看法
去除


弗斯特


以前的


{{page}


下一个


最后

这是一个非常常见的错误，即不理解异步调用

HistoryFactory.getHistory（vm.includeCancelled）。然后（{}）

是异步的，这意味着它将进行调用，然后在异步调用之后继续执行code。当异步调用完成时，

中的代码。然后（{}）

将执行，可能是5毫秒或5秒

因此，这里：

function activate() {
    getHistory();      // async call, doesn't wait
    vm.setPage(1);     // executed immediately after, data not ready 
}

需要：

function activate() {
    getHistory();
}

并将

getHistory（）

更改为：

function getHistory() {
    HistoryFactory.getHistory(vm.includeCancelled).then(
        function(response) {
            _.each(response.data, function(upload) {
                upload.inProgress = upload.status && ['INPROGRESS','NEW'].indexOf(upload.status.statusCd.trim()) > -1;
            });
            vm.uploads = response.data;

            if($state.params.reupload){
                uploadProductionData();
                $state.params.reupload = false;
            }

            // Now call setPage after data is finished
            vm.setPage(1);
        });
}

---

谢谢！最后一件事——在我的html中——它仍然显示完整的列表，并且不会按页面大小划分项目