order在Angular中的多个字段
如何在angular度上同时使用多个字段进行sorting? 按群组分组,然后按分组为例
$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>
如果你想在控制器内的多个字段上sorting,可以使用这个
$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
sorting可以通过使用“orderBy”filter来完成。
两种方式: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);
有两种做AngularJsfilter的方法,一种是使用{{}}的HTML,另一种是实际的JS文件。
您可以使用以下方法解决您的问题:
{{ Expression | orderBy : expression : reverse}}
如果你在HTML中使用它或使用类似的东西:
$filter('orderBy')(yourArray, yourExpression, reverse)
反过来在最后是可选的,它接受一个布尔值,如果它是真的,它会颠倒你的arrays,非常方便的方式来扭转你的arrays…
我写了这个方便的作品,通过对象的多个列/属性进行sorting。 随着每一个连续的列点击,代码存储最后一列点击,并将其添加到一个不断增长的单击列string名称列表中,将它们放入一个名为sortArray的数组中。 内置的Angular“orderBy”filter只读取sortArray列表,并按列存储的顺序对列进行sorting。 所以最后点击的列名成为主要的有序filter,前一个点击下一个优先等。相反的顺序一次影响所有的列顺序,并切换整个数组列表的升序/降序:
<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>
确保最终用户的sorting不复杂。 我一直认为对小组和小组进行sorting有点复杂。 如果它是一个技术最终用户,它可能是好的。