角度列排序单击标题

时间:2016-07-22 20:23:37

标签: javascript angularjs sorting

我正在尝试对所有数据进行排序,因为我还在客户端进行分页。我在分页时遇到另一个问题,它只显示前25个记录,当我更改页面时,新的25个记录集没有显示,但我想弄清楚这个排序问题。

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

    vm.uploads = [];
    vm.includeCancelled = false;
    vm.uploadDataModal = {};
    vm.pager = {};
    vm.setPage = setPage;
    vm.itemsByPage=25;
    $scope.sortType = 'uploadDate';
    $scope.sortReverse = true;

    activate();

    function activate() {
        getUploadHistory();
        $scope.$watch('vm.includeCancelled', getUploadHistory);
        $scope.$on('closeUploadModal', function(event, response) {
            if (vm.uploadDataModal.opened) {
                vm.uploadDataModal.close();
                getUploadHistory();

                var poller = function() {
                    DataUploadHistoryFactory.getUploadById(response.dataLoadExecutionId).success(function(response) {
                        if(response.status.statusCd !== 'NEW'){
                            if(response.status.statusCd === 'ERROR')
                                toaster.error('Could not load execution. Please remove.');
                            else
                                toaster.success('Data execution load complete.');
                            getUploadHistory();
                            return;
                        }
                        $timeout(poller, 5000);
                    })
                }
                poller();

            };
        });
        $scope.$on('cancelUploadModal', function(event, response) {
            if (vm.uploadDataModal.opened) {
                vm.uploadDataModal.close();
                getUploadHistory();

            };
        });
        /*
        $scope.$on('closeDownloadTemplateModal', function() {
            if (vm.downloadTemplateModal.opened)
                vm.downloadTemplateModal.close();
        });
        */
    }

    var checkProcessingPoller = function() {
        DataUploadHistoryFactory.getUploadHistory(vm.includeCancelled).then(
                function(response) {
                    _.each(response.data, function(upload) {
                        if(upload.processing = upload.status && ['PROCESSING'].indexOf(upload.status.statusCd.trim()) > -1){
                            $timeout(checkProcessingPoller, 5000);
                            console.log("Checking Status");
                        }
                    });
                    vm.uploads = response.data;
                });
    }
    checkProcessingPoller();

    function getUploadHistory() {
        DataUploadHistoryFactory.getUploadHistory(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;
                }
                vm.setPage(1);
                vm.itemsByPage=25;
            });
    }

    $scope.sortBy = function(keyName){
        $scope.sortReverse = !$scope.sortReverse;
        $scope.sortType = keyName;
    };

这是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 ng-click="sortBy('uploadDate')" >Upload Date
                                <span ng-show="sortType == 'uploadDate' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'uploadDate' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Product</th>
                            <th>Comments</th>
                            <th ng-click="sortBy('templateName')">Template
                                <span ng-show="sortType == 'templateName' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'templateName' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Last Updated By</th>
                            <th>Last Updated</th>
                            <th>Status
                                <span class="fa fa-caret-down"></span>
                            </th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage">
                            <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 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>
            </div>
        </form>
    </div>
</div>

1 个答案:

答案 0 :(得分:2)

修复标题点击非常简单。这是你现在拥有的:

ng-repeat="upload in vm.uploads | orderBy:'uploadDate':true | limitTo: vm.itemsByPage"

需要更新为:

ng-repeat="upload in vm.uploads | orderBy:sortType:sortReverse | limitTo: vm.itemsByPage"

为了在切换列时反向正常工作,需要检查当前已排序的项是否被选中:

$scope.sortBy = function(keyName){
    if($scope.sortType === keyName) {
        $scope.sortReverse = !$scope.sortReverse;
    } else {
        $scope.sortReverse = false;
    }
    $scope.sortType = keyName;
    console.log('Type', $scope.sortType, 'Reverse', $scope.sortReverse);
};