使用$ filter和谓词函数数组的角多列排序

Question

I need to order an array using the angular $filter('orderBy') function, but need to specify three predicate callbacks, and the sort order needs to be ASC, DESC, ASC.

I know that there are many ways to solve the problem of multi-column sort, but my question is specifically about using Angular's orderBy filter to do it.

The examples that I provide are not the actual data, but rather just a simplified model so that it is easier to explain.

I'm aware that you can use simple property names to handle it like this:

$scope.arr = $filter('orderBy')($scope.arr, ['+year', '-month', '+payment']);

However, my orderBy code looks like this:

$scope.arr = $filter('orderBy')($scope.arr, [
      function(row) {
          //complicated logic here...for demo just return the raw property  
          return row.year;
      },
      function(row) {
          //complicated logic here...for demo just return the raw property
          return row.month;
      },
      function(row) {
          //complicated logic here...for demo just return the raw property
          return row.payment;
      }
    ], true);
  }

With my array of functions method, I cannot seem to find a way to provide ASC, DESC, ASC sorting order. I can use the third argument to flip the whole array ( $filter('orderBy')($scope.arr,[...], true) ), but that's not what I want.

I've tried forming the array like this, but that didn't work either:

['+', function(row){return row.year;}, '-', function(row){return row.month}, '+', function(row){return row.payment;}]

I'm out of ideas. Is there any way to use the predicate function callbacks and still get the per-property specified direction sorting?

 angular.module('app', []).controller('MyController', function($scope, $filter) { var id = 0; var arr = []; //generate some dummy data for (var year = 2000; year < 2010; year++) { for (var month = 3; month > 0; month--) { for (var payment = 100; payment < 300; payment = payment + 50) { var row = { id: id++, year: year, month: '0' + month, payment: payment }; arr.push(row); } } } $scope.arr = arr; $scope.order = function() { $scope.arr = $filter('orderBy')($scope.arr, [ function(row) { return row.year; }, function(row) { return row.month; }, function(row) { return row.payment; } ], true); } //sort the array right away $scope.order(); }); 

 th { padding: 10px 20px; border: 1px solid black; background-color: lightgrey; text-align: center; } td { padding: 10px 20px; border: 1px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script> <div ng-app="app"> <div ng-controller="MyController"> <table> <tr> <th>ID</th> <th>Year</th> <th>Month</th> <th>Payment</th> </tr> <tr ng-repeat="row in arr"> <td>{{row.id}}</td> <td>{{row.year}}</td> <td>{{row.month}}</td> <td>{{row.payment}}</td> </tr> </table> </div> </div> 

Answer 1

Can you try this?

function(row) {
      //complicated logic here...for demo just return the raw property  
      return row.year;
  },
  function(row) {
      //complicated logic here...for demo just return the raw property
      return -1*row.month;
  },
  function(row) {
      //complicated logic here...for demo just return the raw property
      return row.payment;
  }