Question

我试图通过以下链接实现我在网上找到的这种分页解决方案：

我认为问题在于调用函数的方式，因为在我拥有所有数据之前调用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;
                }
            });
    }

这是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>

Answer 1

这是非常常见错误，因为它无法理解异步调用。

.saveSpan { margin-right: 15px; }是异步的，这意味着它将进行调用，然后在异步调用之后继续执行代码。当异步调用完成后，HistoryFactory.getHistory(vm.includeCancelled).then({})内的代码将执行，这可能是5毫秒或5秒。

所以这里：

.then({})

需要：

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

并将function activate() { getHistory(); }更改为：

getHistory()

AngularJS - 像Google这样的逻辑分页示例

1 个答案: