Sorting Data In AngularJS

Akshay Phadke
8y
10.7k
0
4
100
Article

Overview

In this article, we will see Filters in Angular JS -- How they work and their functionalities with an example.

Do refer to previous articles here,

Introduction

Let's see the syntax first to sort the data in AngularJS. To sort the data in Angular JS, we will use order by filter as:

{{orderby_expression | orderby : expression : reverse}}

As you can see from the syntax, it is having two parameters as an expression and the reverse.

NOTE: To sort data in the ascending order, set reverse order as false. To sort in descending order, set it as true . You can also use + to sort the data in an ascending and – the data in descending order also .

Here with the filters in Angular JS, instead of displaying the various rows, we will be sorting it by ascending and descending order .

Now, let's see our model:

code

var mypartone = angular.module("mymodule", []).controller("myController", function($scope)
{
var employees = [{
name: "Akshay",
dateOfBirth: new Date("July 21,1960"),
Address: "Mumbai",
Salary: "1234.34"
}, {
name: "Milind",
dateOfBirth: new Date("July 20,1960"),
Address: "Nashik",
Salary: "12.34"
}, {
name: "Raghvan",
dateOfBirth: new Date("July 19,1960"),
Address: "Pune",
Salary: "1235.34"
}, {
name: "Hari",
dateOfBirth: new Date("July 18,1960"),
Address: "Mumbai",
Salary: "5589.34"
}];
$scope.employees = employees;
});

Now, similarly in our view section, we displayed our data as:

<table>
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
<th>Address</th>
<th>Salary</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in employees ">
<td>{{employee.name | uppercase }}</td>
<td>{{employee.dateOfBirth | date : "dd/MM/yyyy" }}</td>
<td>{{employee.Address | lowercase }}</td>
<td>{{employee.Salary | number :2 }}</td>
<td>{{employee.Salary| currency }}</td>
</tr>
</tbody>
</table>

Now, run the solution and the data is represented as:

Now, here in the output, the data is not sorted in an ascending or descending order. Thus, we will sort this data. Now, here I want to sort data in an ascending order i.e Name. We will use order by filter. We will specify it as false to sort the name in an ascending order, if you don’t specify, by default, it will take it as false .

<tr ng-repeat="employee in employees|orderBy :'name':false ">

Now, just reload the page:

solution

Here, you can see the data is sorted by the name in an ascending order. If you want the name in descending order, just pass true.

<tr ng-repeat="employee in employees|orderBy :'name':true ">

Now, let's reload the page again.

solution

As you can see, the data is sorted in the descending order .

You can also use + and – symbol too.

<tr ng-repeat="employee in employees|orderBy :'+name'">

Again, the output in an ascending order is:

solution

Similarly for,

<tr ng-repeat="employee in employees|orderBy :'+-name'">

Here, it will sort the data in the descending order.

Now, we will give a drop down option to sort the data in the ascending and in descending order. Now, just add the table tag, given above, and select and specify ng-model and write the model property to the scope object.

Sort By : <select ng-model="SortColumn"></select>

Now, in our model, we will assign to $scope object as:

$scope.SortColumn = "name";

We want to sort it by name:

Now, we will add the field which we want to sort the data as:

Sort By

<select ng-model="SortColumn">
<option value="name">Namme Asc</option>
<option value="dateOfBirth">DOB Asc</option>
<option value="Address">Address</option>
<option value="-Salary">Salary Desc</option>
</select>

I am sorting the data by name, DOB and address in an ascending order and salary in descending order.

Now, I will pass SortColumn to tr section.

Use order by filter,

<tr ng-repeat="employee in employees|orderBy:SortColumn">

Now, just run the solution and you will see: