爲什麼角度orderBy自定義比較器不工作？

Question

我想實現角度orderBy指令的自定義比較器。正如你可以在代碼片段看到，自定義比較被忽略（從沒有登錄的console.log），即使它應該根據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>

工作，我已經測試過的例子代碼來自JsFiddle上的角度文檔，它也不起作用。 任何想法？

Answer 1

我在@morels的幫助下找到了解決方案：是的，我確實應該返回1和-1。但主要問題是比較人被忽略了。顯然這是因爲此功能僅適用於1.5.7或更高的角度。 我還需要使用.value上的.split傳遞的參數s1和s2。

下面是代碼片段工作的解決方案：

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。

繼official documentation你可以看到一個典型的比較功能的格式：

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

請改寫爲：

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

請注意，你不會錯過平等即0 。

Answer 3

做這樣

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

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