Как сортировать, используя несколько полей одновременно в 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>
Если вы хотите сортировать по полям mulitple внутри контроллера, используйте этот
$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
Сортировка может быть выполнена с помощью фильтра "orderBy" в angular.
Два способа: 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);
Есть два способа использования фильтров AngularJs: один в HTML с использованием {{}} и один в реальных файлах JS...
Вы можете решить свою проблему, используя:
{{ Expression | orderBy : expression : reverse}}
если вы используете его в HTML или используете что-то вроде:
$filter('orderBy')(yourArray, yourExpression, reverse)
Реверс необязателен в конце, он принимает логическое значение, и если он верен, он изменит массив для вас, очень удобный способ изменить ваш массив...
Я написал эту удобную часть для сортировки по нескольким столбцам/свойствам объекта. С каждым последующим щелчком столбца код сохраняет последний щелчок столбца и добавляет его к растущему списку щелкнутых имен столбцов столбца, помещая их в массив с именем 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>
Убедитесь, что сортировка не сложна для конечного пользователя. Я всегда думал, что сортировка по группе и подгруппе немного сложна для понимания. Если его технический конечный пользователь может быть в порядке.
orderBy:['-group','sub']
для сортировки поgroup
в обратном порядке.