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="vm.sortBy('title');"

И в моем контроллере

    // 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.currentPage = 1 в vm.sortBy метод для запуска нового обзора с первой страницы или установить limitTo фильтр перед 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>