[英]orderBy multiple fields in Angular
如何在角度中同时使用多个字段进行排序? 按组分组,然后按分组示例
$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'" />
请看这个:
http://jsfiddle.net/JSWorld/Hp4W7/32/
<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>
如果你想对控制器内的多个字段进行排序,请使用此方法
$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);
<select ng-model="divs" ng-options="(d.group+' - '+d.sub) for d in divisions | orderBy:['group','sub']" />
用户数组而不是多个orderBY
有两种方法可以使用AngularJs过滤器,一种在HTML中使用{{}},一种在实际的JS文件中......
您可以使用以下方法解决问题:
{{ Expression | orderBy : expression : reverse}}
如果你在HTML中使用它或使用类似的东西:
$filter('orderBy')(yourArray, yourExpression, 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);
我写了这个方便的部分来按对象的多个列/属性进行排序。 每次连续列单击时,代码会存储单击的最后一列,并将其添加到不断增加的单击列字符串名称列表中,并将它们放在名为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">▼</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
}
});
}
}
确保最终用户的排序不复杂。 我一直认为对组和子组进行排序有点复杂。 如果它是技术最终用户,那可能没问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.