orderderby Angular中的多个字段

请看这个:

http://jsfiddle.net/JSWorld/Hp4W7/32/ < a href = " http://jsfiddle.net/JSWorld/Hp4W7/32/ " > < / >

<div ng-repeat="division in divisions | orderBy:['group','sub']">\{\{division.group}}-\{\{division.sub}}</div>

<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />

用户阵列，而不是多个orderBY

如果你想在控制器内的多个字段上排序，使用这个

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

另见https://docs.angularjs.org/api/ng/filter/orderBy

AngularJs有两种过滤器，一种在HTML中使用\{\{}}，另一种在实际的JS文件中…

你可以使用以下方法来解决你的问题:

\{\{ Expression | orderBy : expression : reverse}}

如果你在HTML中使用它或使用类似的东西:

$filter('orderBy')(yourArray, yourExpression, reverse)

reverse在末尾是可选的，它接受一个布尔值，如果它为真，它将为你反转数组，非常方便地反转你的数组…

确保排序对最终用户来说不会太复杂。我一直认为按组和子组排序理解起来有点复杂。如果它是一个技术终端用户，它可能是OK的。

排序可以通过在angular中使用'orderBy'过滤器来完成。

1. 从视图

语法:

\{\{array | orderBy : expression : reverse}}

例如:

 <div ng-repeat="user in users | orderBy : ['name', 'age'] : true">\{\{user.name}}</div>

2. 从控制器

语法:

$filter.orderBy(array, expression, reverse);

例如:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);

我写了这篇方便的文章来根据对象的多列/属性进行排序。在每次连续单击列时，代码存储最后单击的列，并将其添加到一个不断增长的已单击列字符串名称列表中，将它们放置在一个名为sortArray的数组中。Angular内置的“orderBy”过滤器只是读取sortArray列表，并根据存储在其中的列名的顺序对列进行排序。因此，最后单击的列名成为主有序过滤器，前一个列名按优先级单击下一个列名，等等。反向顺序一次影响所有列的顺序，并为完整的数组列表集切换升序/降序:

<script>
app.controller('myCtrl', function ($scope) {
$scope.sortArray = ['name'];
$scope.sortReverse1 = false;
$scope.searchProperty1 = '';
$scope.addSort = function (x) {
if ($scope.sortArray.indexOf(x) === -1) {
$scope.sortArray.splice(0,0,x);//add to front
}
else {
$scope.sortArray.splice($scope.sortArray.indexOf(x), 1, x);//remove
$scope.sortArray.splice(0, 0, x);//add to front again
}
};
$scope.sushi = [
{ name: 'Cali Roll', fish: 'Crab', tastiness: 2 },
{ name: 'Philly', fish: 'Tuna', tastiness: 2 },
{ name: 'Tiger', fish: 'Eel', tastiness: 7 },
{ name: 'Rainbow', fish: 'Variety', tastiness: 6 },
{ name: 'Salmon', fish: 'Misc', tastiness: 2 }
];
});
</script>
<table style="border: 2px solid #000;">
<thead>
<tr>
<td><a href="#" ng-click="addSort('name');sortReverse1=!sortReverse1">NAME<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
<td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
<td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">&#9660;</span><span ng-show="sortReverse1==true">&#9650;</span></a></td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in sushi | orderBy:sortArray:sortReverse1 | filter:searchProperty1">
<td>\{\{ s.name }}</td>
<td>\{\{ s.fish }}</td>
<td>\{\{ s.tastiness }}</td>
</tr>
</tbody>
</table>

创建用于排序的管道。接受字符串和字符串数组，按多个值排序。适用于Angular(而不是AngularJS)。支持字符串和数字排序。

@Pipe({name: 'orderBy'})
export class OrderBy implements PipeTransform {
transform(array: any[], filter: any): any[] {
if(typeof filter === 'string') {
return this.sortAray(array, filter)
} else {
for (var i = filter.length -1; i >= 0; i--) {
array = this.sortAray(array, filter[i]);
}


return array;
}
}


private sortAray(array, field) {
return array.sort((a, b) => {
if(typeof a[field] !== 'string') {
a[field] !== b[field] ? a[field] < b[field] ? -1 : 1 : 0
} else {
a[field].toLowerCase() !== b[field].toLowerCase() ? a[field].toLowerCase() < b[field].toLowerCase() ? -1 : 1 : 0
}
});
}
}