Explain Sorting Data In AngularJS

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 the filter.

{{ orderby_expression | orderBy : expression : reverse }}

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

NOTE: To sort data in 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 ascending and – the data in descending order.

Here with the filters in Angular JS, instead of displaying the various rows, we will be sorting it in 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.

Solution

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 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.

Localhost

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.

Reload

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

You can also use the + and – symbols too.

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

Again, the output in an ascending order is.

Ascending order

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 ascending and in descending order. Now, just add the table tag, given above, 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 in which we want to sort the data.

Sort By

<select ng-model="SortColumn">
  <option value="name">Name 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 ascending order and salary in descending order.

Now, I will pass SortColumn to the tr section.

Use order by filter.

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

Now, just run the solution and you will see.

Run

Now see the below demo of how we sorted the data.

Output

Conclusion

This was sorting the data in Angular JS. Hope this article was helpful.