javascript - Why is angular orderBy custom comparator not working? - Stack Overflow

admin管理员组

文章数量:1259962

I am trying to implement a custom parator for the angular orderBy directive. As you can see in the code snippet, the custom parator is being ignored (nothing logged from console.log) even though it should work according to the angular documentation for orderBy

angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.files = [
    {name: 'File1', size: '1.2 Mb'},
    {name: 'File2', size: '2.4 Kb'},
    {name: 'File3', size: '241 Bytes'},
    {name: 'File4', size: '2.0 Mb'},
    {name: 'File5', size: '16.1 Kb'}
  ];

  $scope.fileSizeComparator = function(s1, s2) {
    // split the size string in nummeric and alphabetic parts
    console.log(s1);
    console.log(s2);
    var s1Splitted = s1.size.split(" ");
    var s2Splitted = s2.size.split(" ");
    if (s1Splitted[1] === s2Splitted[1]) {
      // if size type is the same, pare the number
      return s1Splitted[0] > s2Splitted[0];
    }
    // default : pare on size type Mb > Kb > Bytes
    return s1Splitted[1] > s2Splitted[1];
  };
}]);

<script src=".2.23/angular.min.js"></script>
<div ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <table>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
      <tr ng-repeat="file in files | orderBy:'size':false:fileSizeComparator">
        <td>{{file.name}}</td>
        <td>{{file.size}}</td>
      </tr>
    </table>
  </div>
</div>

I am trying to implement a custom parator for the angular orderBy directive. As you can see in the code snippet, the custom parator is being ignored (nothing logged from console.log) even though it should work according to the angular documentation for orderBy

angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.files = [
    {name: 'File1', size: '1.2 Mb'},
    {name: 'File2', size: '2.4 Kb'},
    {name: 'File3', size: '241 Bytes'},
    {name: 'File4', size: '2.0 Mb'},
    {name: 'File5', size: '16.1 Kb'}
  ];

  $scope.fileSizeComparator = function(s1, s2) {
    // split the size string in nummeric and alphabetic parts
    console.log(s1);
    console.log(s2);
    var s1Splitted = s1.size.split(" ");
    var s2Splitted = s2.size.split(" ");
    if (s1Splitted[1] === s2Splitted[1]) {
      // if size type is the same, pare the number
      return s1Splitted[0] > s2Splitted[0];
    }
    // default : pare on size type Mb > Kb > Bytes
    return s1Splitted[1] > s2Splitted[1];
  };
}]);

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <table>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
      <tr ng-repeat="file in files | orderBy:'size':false:fileSizeComparator">
        <td>{{file.name}}</td>
        <td>{{file.size}}</td>
      </tr>
    </table>
  </div>
</div>

I have tested the example code from the angular documentation on JsFiddle and it's not working either. Any ideas?

• javascript
• angularjs
• sorting
• angularjs-orderby

Share Improve this question Follow asked Jul 1, 2016 at 9:05 Tom ShenTom Shen 1,04533 gold badges1111 silver badges2929 bronze badges 1

• 1 looking in the last example of angular documentation, it says the 3rd parameter should be read as a function – Tom Shen Commented Jul 1, 2016 at 9:09

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 15

I found the solution after some help from @morels : yes I should indeed return 1 and -1. But the main problem was that the parator was being ignored. Apparently it is because this feature is only available to angular 1.5.7 and higher. I also needed to use the .split on the .value of the passed parameters of s1 and s2.

Here's the working solution in code snippet:

angular.module('orderByExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.files = [
    {name: 'File1', size: '1.2 Mb'},
    {name: 'File2', size: '2.4 Kb'},
    {name: 'File3', size: '241 Bytes'},
    {name: 'File4', size: '2.0 Mb'},
    {name: 'File5', size: '16.1 Kb'}
  ];

  $scope.fileSizeComparator = function(s1, s2) {
    // split the size string in nummeric and alphabetic parts
    var s1Splitted = s1.value.split(" ");
    var s2Splitted = s2.value.split(" ");
    if (s1Splitted[1] === s2Splitted[1]) {
      // if size type is the same, pare the number
      return parseFloat(s1Splitted[0]) > parseFloat(s2Splitted[0]) ? -1 : 1;
    }
    // default : pare on size type Mb > Kb > Bytes
    return s1Splitted[1] > s2Splitted[1] ? -1 : 1;
  };
}]);

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<div ng-app="orderByExample">
  <div ng-controller="ExampleController">
    <table>
      <tr>
        <th>Name</th>
        <th>Size</th>
      </tr>
      <tr ng-repeat="file in files | orderBy:'size':false:fileSizeComparator">
        <td>{{file.name}}</td>
        <td>{{file.size}}</td>
      </tr>
    </table>
  </div>
</div>

Because you should return -1,0,1 not true,false.

Following the official documentation you can see the format of a typical pare function:

$scope.localeSensitiveComparator = function(v1, v2) {
// If we don't get strings, just pare by index
if (v1.type !== 'string' || v2.type !== 'string') {
  return (v1.index < v2.index) ? -1 : 1;
}

// Compare strings alphabetically, taking locale into account
return v1.value.localeCompare(v2.value);   };

Please rewrite as:

$scope.fileSizeComparator = function(s1, s2) {
    // split the size string in nummeric and alphabetic parts
    console.log(s1);
    console.log(s2);
    var s1Splitted = s1.size.split(" ");
    var s2Splitted = s2.size.split(" ");
    if (s1Splitted[1] === s2Splitted[1]) {
      // if size type is the same, pare the number
      if ( s1Splitted[0] > s2Splitted[0])
        return 1;
      else 
       return -1;
    }
    // default : pare on size type Mb > Kb > Bytes
    return s1Splitted[1] > s2Splitted[1] ? -1 : 1;
  };

Note that you never miss equality i.e. 0.

Do like this

ng-repeat="file in files | orderBy: sizeFilter: true"

$scope.sizeFilter=function(file){
        $scope.size = file.size;
        return $scope.size;
};

本文标签： javascriptWhy is angular orderBy custom comparator not workingStack Overflow