Sorting in AngularJS

Sourabh Somani
10y
23.2k
0
4

Article

My previous articles have described:

Now in this article I will describe sorting and OrderBy filtering in AngularJS.

Introduction

I assume everyone knows that sorting is the process of arranging items depending on a specified sequence.

In AngularJS is the filter "orderBy". Using it we can do sorting. Now I am showing you the procedure for sorting using AngularJS.

Step 1

First of all you need to add an external "angular.min.js" file to your application. To add this file to your application you need to download the "angular.min.js" file from the official website of AngularJS; the link is:
AngularJS Official Wbsite.

Now after downloading this file, you need to add this file to the head section of your application as in the following:

<!doctype html>
<html ng-app>

<head>
<script src="angular.min.js"></script>

<title>Sorting using AngularJS</title>

Step 2

In the next step, I am creating another script in the head section, in which I am defining an array with "Serial Number", "Name" and "Marks", as in following:

<script>
function Ctrl($scope) {
$scope.friends = [{sno:1, name:'Sourabh Somani', Marks:'75'},
{sno:2, name:'Shaili Dashora', Marks:'90'},
{sno:3, name:'Divya Sharma', Marks:'89'},
{sno:4, name:'Swati Soni', Marks:'78'},
{sno:5, name:'Ankit', Marks:'74'}]
}
</script>

Step 3

I have also created an External CSS file (mystyle.css), So now I am adding this using the following code:

<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Note: "mystyle.css" file you can download from uploaded Zip File.

Step 4

Now in the body section I am making a division from the Div tag and in this I am attaching a controller class to the view using the "ng-controller" directive.

Step 5

Now I am creating a table with its header. These table headers I am binding using a "ng-click" directive. Because whenever the table header is clicked, that column will be sorted depending on the header.

<table cellspacing='0'>
   <thead>
      <tr>
         <th><center><a href="" ng-click="predicate = 'sno'; reverse=!reverse">S.NO</a></center></th>
         <th><center><a href="" ng-click="predicate = 'name'; reverse=!reverse">NAMES</a></center></th
         <th><center><a href="" ng-click="predicate = 'Marks'; reverse=!reverse">MARKS</a></center></th>
      </tr>
   </thead>

Here a "predicate" is a comparator to determine the order of the elements. The order may be ascending or descending.

The predicate can be one of the following:

Function: The '<', '>', '=' operator decides the result of the function.
String: One of the best properties of AngularJS is to order by 'name'. The '+' and '-' prefixes are used for ascending and descending order respectively, for example '+name' or '-name'. This is the easiest way of sorting.
Array: Suppose two item values are equivalent like marks of the two students (A and B) are the same like 95% and we are sorting by percentage (%), then there might confusion about whether the student name should be first, so for that the next predicate is used. So we can say an Array may me a Function predicate or a String predicate.

And here the "reverse" boolean type shows the order of the array. Its value may be "False" or "True".

Step 5

Now in the next step I am filling all the elements of the table inside the table body using the following code.

   <tbody>
      <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
         <td>{{friend.sno}}</td>
         <td>{{friend.name}}</td>
         <td>{{friend.Marks}}%</td>
      </tr>
   </tbody>
</table>
</div>
</body>
</html>

Complete Code

<!doctype html>
<html ng-app>
   <head>
   <script src="angular.min.js"></script>
   <title>Sorting using AngularJS</title>
   <script>
      function Ctrl($scope) {
         $scope.friends =[{sno:1, name:'Sourabh Somani', Marks:'75'},
                          {sno:2, name:'Shaili Dashora', Marks:'90'},
                          {sno:3, name:'Divya Sharma', Marks:'89'},
                          {sno:4, name:'Swati Soni', Marks:'78'},
                          {sno:5, name:'Ankit', Marks:'74'}]
         }
</script>
   <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
   <div ng-controller="Ctrl">
      <H1>Sorting The List In AngularJS</H1><hr/>
      <table cellspacing='0'>
         <thead>
            <tr>
               <th><center><a href="" ng-click="predicate = 'sno'; reverse=!reverse">S.NO</a></center></th>
               <th><center><a href="" ng-click="predicate = 'name'; reverse=!reverse">NAMES</a></center></th>
               <th><center><a href="" ng-click="predicate = 'Marks'; reverse=!reverse">MARKS</a></center></th>
             </tr>
         </thead>
         <tbody>
            <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
               <td>{{friend.sno}}</td>
               <td>{{friend.name}}</td>
               <td>{{friend.Marks}}%</td>
            </tr>
         </tbody>
      </table>
     </div>
</body>
</html>

Output