我正在尝试对所有数据进行排序，因为我还在客户端进行分页。我在分页时遇到另一个问题，它只显示前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>
答案 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);
};