javascript - SortBy 排序不正确？

Question

我有一个带有这个 ng-repeat 的表

ticket in filteredTickets = (vm.tickets | filter : vm.search | orderBy : vm.propertyName : vm.reverse | limitTo:vm.itemsPerPage:vm.itemsPerPage*(vm.currentPage-1))

我的 thead 在 ng-click 上调用了一个函数

ng-click="vm.sortBy('title');"

在我的 Controller 中

    // table ordering
    vm.propertyName = 'ticketID'; // default order
    vm.reverse = true;

    vm.sortBy = function(propertyName) {
        vm.reverse = (vm.propertyName === propertyName) ? !vm.reverse : false;
        vm.propertyName = propertyName;
    }

但它的顺序不太好。我有多个列，有些是整数，有些是字符串，并且排序不正确(它排序但随机)

有什么帮助吗？

Answer 1

您有 limiTo 过滤器，因此当您更改 vm.propertyName 的值时，您可以看到另一组票证(不是当前的，但有新的排序)，可能正是这让您产生了“随机”排序的感觉？在这种情况下，您可以在 vm.sortBy 方法中设置 vm.currentPage = 1 以从第一页开始新的概览或放置 limitTo filter < strong>before orderBy 修复当前页面，然后才对其中的项目应用排序，如下所示:

angular.module('app', []).controller('ctrl', function($scope){
  var vm = this;
    
  vm.propertyName = 'ticketID';  
  vm.itemsPerPage = 5;
  vm.currentPage = 1;
  vm.tickets = [];
  
  for(var i = 0; i < 100; i++)  
    vm.tickets.push({
      ticketID: i,
      name: 'Name' + (100 - i)
    })   
  
  vm.sortBy = function(propertyName) {
    vm.reverse = (vm.propertyName === propertyName) ? !vm.reverse : false;
    vm.propertyName = propertyName;
    //or simply vm.currentPage = 1; without rest of stuff
  }
  
  vm.pages = function(value){
    return Math.ceil(value);
  }
})

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller='ctrl as vm'>
  search by: <input type='text' ng-model='vm.search'/>
  <br>  
  <button ng-click='vm.sortBy("ticketID")'>Sort by ticketID</button>
  <button ng-click='vm.sortBy("name")'>Sort by name</button>  
  <ul>
    <li ng-repeat='ticket in filteredTickets = (vm.tickets | filter : vm.search | limitTo : vm.itemsPerPage : vm.itemsPerPage * (vm.currentPage - 1)) | orderBy : vm.propertyName : vm.reverse'>
      {{ticket}}
    </li>
  </ul>  
  <button ng-disabled='vm.currentPage == 1' ng-click='vm.currentPage = vm.currentPage - 1'>Prev</button>
  <button disabled>{{vm.currentPage}}</button>
  <button ng-disabled='vm.currentPage == vm.pages((vm.tickets | filter : vm.search).length / vm.itemsPerPage)' ng-click='vm.currentPage = vm.currentPage + 1'>Next</button>  
</div>