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']); 

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

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

用户数组而不是多个orderBY

sorting可以通过使用“orderBy”filter来完成。

两种方式:1.从视图2.从控制器

  1. 从视图

句法:

 {{array | orderBy : expression : reverse}} 

例如:

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

句法:

 $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">&#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> 

确保最终用户的sorting不复杂。 我一直认为对小组和小组进行sorting有点复杂。 如果它是一个技术最终用户,它可能是好的。