为什么 angular orderBy 自定义比较器不起作用?
Why is angular orderBy custom comparator not working?
我正在尝试为 angular 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 上测试了 angular 文档中的示例代码,但它也无法正常工作。
有什么想法吗?
因为你应该 return -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
。
在@morels 的帮助下我找到了解决方案:是的,我确实应该 return 1 和 -1。但主要问题是比较器被忽略了。显然是因为此功能仅适用于 angular 1.5.7 及更高版本。
我还需要在 s1 和 s2 的传递参数的 .value
上使用 .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>
像这样
ng-repeat="file in files | orderBy: sizeFilter: true"
$scope.sizeFilter=function(file){
$scope.size = file.size;
return $scope.size;
};
我正在尝试为 angular 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 上测试了 angular 文档中的示例代码,但它也无法正常工作。 有什么想法吗?
因为你应该 return -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
。
在@morels 的帮助下我找到了解决方案:是的,我确实应该 return 1 和 -1。但主要问题是比较器被忽略了。显然是因为此功能仅适用于 angular 1.5.7 及更高版本。
我还需要在 s1 和 s2 的传递参数的 .value
上使用 .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>
像这样
ng-repeat="file in files | orderBy: sizeFilter: true"
$scope.sizeFilter=function(file){
$scope.size = file.size;
return $scope.size;
};