Skilled in SEO, content writing, and digital marketing. Completed several years of working in many organizations including multinational companies.
I love to learn new things in life that keep me motivated.
In AngularJS, you can use the orderBy filter to sort objects based on different fields. Here's how you can
orderBy multiple fields:
Syntax
The orderBy filter accepts a set of predicate functions or strings, where each predicate can refer to a field and optionally specifies a sort direction (+ for
ascending, - for descending).
items are the array of objects you want to display. orderBy:['field1', 'field2'] Specifies that the item order should be sorted first in ascending order by
field1, then in ascending order by field2 by default.
In the syntax above- orderBy:['city', '-age'] First sort the items in
ascending order by city ('city'), then in descending
order by age ('-age').
the city is arranged in order of ascending order. -age sorts age in descending order (using - before the field name in descending order).
Example-
Here's a basic example that demonstrates the multiple orderBy properties in Angular js
<!DOCTYPE html>
<html data-ng-app="myApp">
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Keypress Event Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!-- bootstrap cdn link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- angular js cdn link -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>
<div data-ng-controller="MyController" class="container my-4">
<div class="my-2">
<h3>Order by 'city' in ascending and 'age' in descending</h3>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<!-- bind the data using ng-repead and orders the item by 'city' in asc, then 'age' in desc-->
<tbody data-ng-repeat="item in items | orderBy:['city', '-age']">
<tr>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.city }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
angular.module("myApp", [])
.controller("MyController", function($scope){
$scope.items = [
{ name: 'John', age: 30, city: 'New York' },
{ name: 'Jane', age: 25, city: 'San Francisco' },
{ name: 'Doe', age: 35, city: 'Seattle' },
{ name: 'Mary', age: 28, city: 'Chicago' },
{ name: 'David', age: 32, city: 'Boston' }
];
});
</script>
</body>
</html>
Ashutosh Kumar Verma
19-Jun-2024Order By Multiple Fileds
In AngularJS, you can use the
orderBy
filter to sort objects based on different fields. Here's how you canorderBy
multiple fields:Syntax
The orderBy filter accepts a set of predicate functions or strings, where each predicate can refer to a field and optionally specifies a sort direction (
+
for ascending,-
for descending).In the example above
items
are the array of objects you want to display.orderBy:['field1', 'field2']
Specifies that the item order should be sorted first in ascending order by field1, then in ascending order by field2 by default.Array data
Let's take an array of objects in the controller,
And you want to show these factors first in ascending order by
city
, then in descending order byage
. You can use orderByIn the syntax above-
orderBy:['city', '-age']
First sort theitems
in ascending order by city ('city
'), then in descending order by age ('-age
').the
city
is arranged in order of ascending order.-age
sorts age in descending order (using-
before the field name in descending order).Example-
Here's a basic example that demonstrates the multiple orderBy properties in Angular js
Output-
![answer 6518921906021105](/Images/mindstick-loader-image.png)
Also, Read: How to use a keypress event in AngularJS?