orderBy multiple fields in Angular

Question

How to sort by using multiple fields at same time in angular? fist by group and then by sub-group for Example

$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}];

I wanted to display this as

group : Sub-group

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'" />

Solution 1

Please see this:

http://jsfiddle.net/JSWorld/Hp4W7/32/

<div ng-repeat="division in divisions | orderBy:['group','sub']">{{division.group}}-{{division.sub}}</div>

Solution 2

If you wants to sort on mulitple fields inside controller use this

$filter('orderBy')($scope.property_list, ['firstProp', 'secondProp']);

See also https://docs.angularjs.org/api/ng/filter/orderBy

Solution 3

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

User array instead of multiple orderBY

Solution 4

There are 2 ways of doing AngularJs filters, one in the HTML using {{}} and one in actual JS files...

You can solve you problem by using :

{{ Expression | orderBy : expression : reverse}}

if you use it in the HTML or use something like:

$filter('orderBy')(yourArray, yourExpression, reverse)

The reverse is optional at the end, it accepts a boolean and if it's true, it will reverse the Array for you, very handy way to reverse your Array...

Solution 5

Sorting can be done by using 'orderBy' filter in angular.

Two ways: 1. From view 2. From controller

1. From view

Syntax:

{{array | orderBy : expression : reverse}} 

For example:

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

2. From controller

Syntax:

$filter.orderBy(array, expression, reverse);

For example:

$scope.filteredArray = $filter.orderBy($scope.users, ['name', 'age'], true);

View more solutions

Comments

[Dmytro]

orderBy:['-group','sub'] for sorting by group in reverse order.

[luchosrock]

Does the group field have priority for being first in the orderBy List?

[Patrick Refondini]

@luchosrock, yes it does, as expected. Playing with the provided jsfiddle easily confirms sort priority is from left to right for the provided sort fields.

[abyrne85]

Do you know if it's possible to give priority to one of the fields? For example in this jsFiddle I would like the items with a value for 'sub' to appear at the top of the list, then the rest of the values can be arranged by group.

[Daniel Nalbach]

Note that the optional reverseOrder parameter does not support an array like the expression param does, but you can omit it and instead provide sort order on each array item so that they are reversed (or not) separately. Example: orderBy: ['group', '-sub'] will sort by group in normal fashion, then by sub in reverse order. It is possible to get some complex combinations this way.

[Daniel Nalbach]

We simulated priority in our shop by giving the array items a boolean property, then using that as the first option. Example: orderBy: ['-featured', 'title'], which caused the featured true items to be at the top (alphabetically), then the rest of the items listed alphabetically.

[vinesh]

I have trouble sorting by two properties. When I sortby name and then age, it does not sort by age. Here is my plunker plnkr.co/edit/gqZaKbb7TwnvGGewydPv?p=preview

[Alireza]

Also here to have a look: docs.angularjs.org/api/ng/filter/orderBy

[Afshin Moazami]

This is not even a relevant "comment". For sure not an answer to the question

[Jens Alenius]

Is it so wrong to ask yourself if the current approach is the best when your doing GUI development? The end user experience feels relevant to me

[Owen Johnson]

There are plenty of scenarios where sorting by multiple properties makes it easier for the user to understand the organization. You're essentially grouping things into categories.

[Andris]

PS: Actually in my opinion no one currently has answered to actual question, cause it was for Angular, not AngularJS. My solution works starting from Angular 2. Tested on Angular 7.2.15

[kvarkel]

If you want to sort by multiple fields chosen from a select directive, be sure to convert the value from a string to an array. Example: for selected option <select ng-model="sortoption"><option value="-sub,group">..., use orderby: sortoption.split(",")

[Nick]

You should consider a) when was this question asked, and b) when was Angular 2 first announced.

[rolling stone]

@andris Do you have a working end to end code example hosted somewhere ?

[Andris]

Sorry, but no :(