angle orderByカスタムコンパレータが機能しないのはなぜですか？

Question

私はangleByyディレクティブのカスタムコンパレータを実装しようとしています。コードスニペットで見ることができるように、カスタムコンパレータは、それは私が例をテストしている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, compare the number 
 
     return s1Splitted[0] > s2Splitted[0]; 
 
    } 
 
    // default : compare on size type Mb > Kb > Bytes 
 
    return s1Splitted[1] > s2Splitted[1]; 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/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>

に従って動作するはずにもかかわらず（にconsole.logからログインして何を）無視されていませんJsFiddleの角度の文書からのコードであり、どちらも機能していません。 アイデア

Answer 1

@morelsの助けを借りて解決策を見つけました。はい、実際には1と-1を返さなければなりません。しかし、主な問題は、コンパレータが無視されていることでした。明らかに、この機能は角度1.5.7以上でしか使用できないためです。 また、のs1とs2の渡されたパラメータで.splitを使用する必要がありました。

ここでは、コードスニペットで実用的なソリューションです：

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, compare the number 
 
     return parseFloat(s1Splitted[0]) > parseFloat(s2Splitted[0]) ? -1 : 1; 
 
    } 
 
    // default : compare on size type Mb > Kb > Bytes 
 
    return s1Splitted[1] > s2Splitted[1] ? -1 : 1; 
 
    }; 
 
}]);

<script src="https://ajax.googleapis.com/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>

Answer 2

-1,0,1ではなく、true,falseを返す必要があります。

$scope.localeSensitiveComparator = function(v1, v2) { 
// If we don't get strings, just compare 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); }; 

として書き直してください：あなたは0すなわち平等を逃しません

$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, compare the number 
     if (s1Splitted[0] > s2Splitted[0]) 
     return 1; 
     else 
     return -1; 
    } 
    // default : compare on size type Mb > Kb > Bytes 
    return s1Splitted[1] > s2Splitted[1] ? -1 : 1; 
    }; 

注意をofficial documentationあなたは典型的な比較関数の形式を見ることができます後

。

Answer 3

は角ドキュメントの最後の例で見てこの

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

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