---
title: "How orderBy multiple fields in Angular?"
description: "How orderBy multiple fields in Angular?"
author: "Revati S Misra"
published: 2024-06-17
updated: 2024-06-19
canonical: https://www.mindstick.com/forum/160754/how-orderby-multiple-fields-in-angular
category: "angular js"
tags: ["javascript", "angular js", "angularjs filter"]
reading_time: 3 minutes
---
# How orderBy multiple fields in Angular?
How [orderBy](https://www.mindstick.com/forum/160534/orderby-then-select-vs-select-then-orderby-performance) [multiple](https://www.mindstick.com/blog/12797/iowa-is-expected-to-see-heavy-growth-in-multiple-sectors) [fields](https://www.mindstick.com/forum/159126/sql-query-for-all-tables-and-fields-in-an-oracle-db) in [Angular](https://www.mindstick.com/articles/13081/advantages-disadvantages-of-angularjs-is-that-ideal-for-your-project)?
## Replies
### Reply by Ashutosh Patel
### Order By Multiple Fileds
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**).
```html
{{ item.field1 }}, {{ item.field2 }}
```
## 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,
```javascript
$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' }
];
```
And you want to show these factors first in ascending order by `city`, then in descending order by `age`. You can use orderBy
```html
Name
Age
City
{{ item.name }}
{{ item.age }}
{{ item.city }}
```
**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
```html
Keypress Event Example
Order by 'city' in ascending and 'age' in descending