SortBy не выполняет сортировку правильно?

У меня есть таблица с этим 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-щелчке

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;
    }

но это не очень хорошо. У меня есть несколько столбцов, некоторые с целыми числами, другие со строками и не упорядочиваются правильно (они упорядочиваются, но случайным образом)

Любая помощь?

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
74
1

Ответы 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>

Другие вопросы по теме