SortBy 没有正确排序？答案

【问题标题】：SortBy not Sorting correctly?SortBy 没有正确排序？
【发布时间】：2018-07-05 17:34:48
【问题描述】：

我有一张带有这个 ng-repeat 的桌子

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

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

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

但它的顺序不好。我有多个列，一些带有整数，其他带有字符串并且没有正确排序（它排序但随机）

有什么帮助吗？

【问题讨论】：

标签： javascript html angularjs

【解决方案1】：

您有limiTo 过滤器，因此当您更改vm.propertyName 的值时，您会看到另一组票（不是当前票，但经过新排序），可能正是这给您带来了的感觉“随机”排序？在这种情况下，您可以在 vm.sortBy 方法中设置 vm.currentPage = 1 以从第一页开始新的概览，或者将 limitTo 过滤 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>

【讨论】：