如何通过使用多个字段在同一时间排序在角?首先按组,然后按子组
例如
$scope.divisions = [{'group':1,'sub':1}, {'group':2,'sub':10}, {'group':1,'sub':2},{'group':1,'sub':20},{'group':2,'sub':1},
{'group':2,'sub':11}];
我想把它显示为
组:子组
1-1
1-2
1-20
2-1
2-10
2-11
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:'group' | orderBy:'sub'" />
AngularJs有两种过滤器,一种在HTML中使用{{}},另一种在实际的JS文件中…
你可以使用以下方法来解决你的问题:
{{ Expression | orderBy : expression : reverse}}
如果你在HTML中使用它或使用类似的东西:
$filter('orderBy')(yourArray, yourExpression, reverse)
reverse在末尾是可选的,它接受一个布尔值,如果它为真,它将为你反转数组,非常方便地反转你的数组…
排序可以通过在angular中使用'orderBy'过滤器来完成。
两种方式:
1. 从视图
2. 从控制器
从视图
语法:
{{array | orderBy : expression : reverse}}
例如:
<div ng-repeat="user in users | orderBy : ['name', 'age'] : true">{{user.name}}</div>
从控制器
语法:
$filter.orderBy(array, expression, reverse);
例如:
$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);
I wrote this handy piece to sort by multiple columns / properties of an object. With each successive column click, the code stores the last column clicked and adds it to a growing list of clicked column string names, placing them in an array called sortArray. The built-in Angular "orderBy" filter simply reads the sortArray list and orders the columns by the order of column names stored there. So the last clicked column name becomes the primary ordered filter, the previous one clicked the next in precedence, etc. The reverse order affects all columns order at once and toggles ascending/descending for the complete array list set:
<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">▼</span><span ng-show="sortReverse1==true">▲</span></a></td>
<td><a href="#" ng-click="addSort('fish');sortReverse1=!sortReverse1">FISH<span ng-show="sortReverse1==false">▼</span><span ng-show="sortReverse1==true">▲</span></a></td>
<td><a href="#" ng-click="addSort('tastiness');sortReverse1=!sortReverse1">TASTINESS<span ng-show="sortReverse1==false">▼</span><span ng-show="sortReverse1==true">▲</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
}
});
}
}