The orderBy filter in AngularJS allows you to sort an array of data dynamically based on specific properties. You can use it to sort numbers, strings, and even objects.
Sorts data in ascending or descending order
Works with ng-repeat to display sorted lists dynamically
Can handle multiple sorting criteria
Supports dynamic sorting based on user input
1. Basic Syntax of orderBy
The orderBy filter is used as follows:
{{ array | orderBy: 'property' }}
Where:
'property'→ The field by which the array should be sorted.- You can prefix with
-to sort in descending order (-property).
2. Sorting a List of Strings
Example: Sorting Names Alphabetically
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="SortController">
<h2>Sorted Names</h2>
<ul>
<li ng-repeat="name in names | orderBy:'name'">
{{ name }}
</li>
</ul>
<script>
var app = angular.module('myApp', []);
app.controller('SortController', function($scope) {
$scope.names = ["John", "Mary", "Robert", "Lisa", "Michael", "Emma"];
});
</script>
</body>
</html>
Features:
- Names are sorted alphabetically.
- Automatically updates when data changes.
3. Sorting Objects by Property
When working with objects, you can sort them using a specific property.
Example: Sorting Employees by Salary
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="employee in employees | orderBy:'salary'">
<td>{{ employee.name }}</td>
<td>{{ employee.salary }}</td>
</tr>
</table>
app.controller('EmployeeController', function($scope) {
$scope.employees = [
{ name: "Alice", salary: 50000 },
{ name: "Bob", salary: 70000 },
{ name: "Charlie", salary: 60000 }
];
});
Features:
- Employees are sorted by salary in ascending order.
- You can change sorting direction using
-salary.
4. Sorting in Descending Order
You can sort in descending order by adding a minus (-) before the property name.
Example: Sorting Products by Price (Descending Order)
<table border="1">
<tr>
<th>Product</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in products | orderBy:'-price'">
<td>{{ product.name }}</td>
<td>{{ product.price | currency }}</td>
</tr>
</table>
app.controller('ProductController', function($scope) {
$scope.products = [
{ name: "Laptop", price: 800 },
{ name: "Phone", price: 500 },
{ name: "Tablet", price: 300 }
];
});
Feature:
- Products are sorted from highest to lowest price.
5. Allowing Users to Choose Sorting Order
You can allow users to select the sorting order dynamically using ng-model.
Example: User-Selectable Sorting
<select ng-model="sortBy">
<option value="name">Sort by Name</option>
<option value="salary">Sort by Salary</option>
</select>
<table border="1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr ng-repeat="employee in employees | orderBy:sortBy">
<td>{{ employee.name }}</td>
<td>{{ employee.salary }}</td>
</tr>
</table>
Feature:
- User can change sorting order dynamically.
6. Sorting by Multiple Fields
You can sort data by multiple fields using an array of properties.
Example: Sorting by Department and Then by Salary
<table border="1">
<tr>
<th>Name</th>
<th>Department</th>
<th>Salary</th>
</tr>
<tr ng-repeat="employee in employees | orderBy:['department', '-salary']">
<td>{{ employee.name }}</td>
<td>{{ employee.department }}</td>
<td>{{ employee.salary }}</td>
</tr>
</table>
app.controller('MultiSortController', function($scope) {
$scope.employees = [
{ name: "Alice", department: "IT", salary: 60000 },
{ name: "Bob", department: "HR", salary: 50000 },
{ name: "Charlie", department: "IT", salary: 70000 }
];
});
Features:
- Employees are sorted by department first.
- Within the department, employees are sorted by salary in descending order.
7. Using $orderBy in Controllers
If you need sorting inside a controller, use $filter.
Example: Sorting Array in Controller
app.controller('SortController', function($scope, $filter) {
var products = [
{ name: "Laptop", price: 800 },
{ name: "Phone", price: 500 },
{ name: "Tablet", price: 300 }
];
// Sort by price (ascending)
$scope.sortedProducts = $filter('orderBy')(products, 'price');
});
Feature:
- Sorting is done inside the controller.
8. Reversing Sorting Order with a Button
Allow users to toggle between ascending and descending order.
Example: Sorting Order Toggle
<button ng-click="reverse = !reverse">Toggle Sort Order</button>
<ul>
<li ng-repeat="name in names | orderBy:'name':reverse">
{{ name }}
</li>
</ul>
Feature:
- Clicking the button reverses the sorting order dynamically.