Apply Sorting Using AngularJS

Introduction

In this article I will tell you how to do sorting using AngularJS.

Angular provides the feature named orderBy that can be used to sort the given data. Here I will create an application where sorting will be applied on multiple columns.

Step 1

First of all you need to add an external Angular.js file to your application, in other words "angular.min.js".

For this you can go to the AngularJS official site or download my source code and then fetch it or you can click on this link and download it: ANGULARJS.

After downloading the external file now you need to add this file to the Head section of your application.

</head>

Step 2

Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.

Now I will create a simple application that will help you understand this filter.

First I will create a JavaScript function in which some initial values will be passed.

function x($scope) {

$scope.cars =

[{ name: 'Alto 800', price: '3.5 Lakh', version: 'Manual' },

{ name: 'Eon', price: '4.2 Lakh', version: 'Manual' },

{ name: 'i20', price: '7 Lakh', version: 'Automattic' },

{ name: 'Honda City', price: '11 Lakh', version: 'Automattic' },

{ name: 'i10', price: '5 Lakh', version: 'Manual' }]

$scope.sorting = '-version';

}

</script>

Here I have created an Array of some data, three columns are created in which multiple names, prices and versions of car are defined.

Then reverse sorting is applied on the version of car, this is the initial sorting, later in this article I will show you how to apply sorting on all the columns.

Step 3

Our work on the View is completed and now I will work on the View Model of this application.

<body>

[ <a href="" ng-click="sorting=''">Default</a> ]

<tr>

<th><a href="" ng-click="sorting = 'price'; reverse=!reverse">Price</a></th>

<th><a href="" ng-click="sorting = 'version'; reverse=!reverse">Version</a></th>

</tr>

<td>{{car.price}}</td>

<td>{{car.version}}</td>

</tr>

</table>

</div>

</body>

"x", which was the name of the function in Step 2, is bound with one of the parent Divs using ng-controller. Then a table is created in which three headings are provided in separate columns, in these headings anchors are used whose click is bound to the name or price or version, these clicks will work for sorting the data.

Then one more table is created in which the ng-repeat directive is used and its columns are bound to the name, price and version of car. As the repeat directive is used it will cerate a dynamic table of the data. In this table orderBy is used that shows that it's column will be sorted whenever "sorting" is called.

Now our application is created and is ready to for execution.

Output

On running the application you will get an output like this one:

sorting using AngularJS

You can see that all the data is displayed in table format and in the heading section an anchor is provided whose click should provide the sorting on a specified column.

Now I will click on one of the Headers and you will see that reverse sorting is applied.

sorting using AngularJS

This is because by default reverse sorting was made available in the JavaScript.

Now I will click on one of the Headers and again sorting will be done.

sorting using AngularJS

Now if I click on the Default Anchor then everything will be reset to it's default position.

sorting using AngularJS

The complete code of this application is as follows:

function x($scope) {

$scope.cars =

[{ name: 'Alto 800', price: '3.5 Lakh', version: 'Manual' },

{ name: 'Eon', price: '4.2 Lakh', version: 'Manual' },

{ name: 'i20', price: '7 Lakh', version: 'Automattic' },

{ name: 'Honda City', price: '11 Lakh', version: 'Automattic' },

{ name: 'i10', price: '5 Lakh', version: 'Manual' }]

$scope.sorting = '-version';

}

</script>

</head>

<body>

[ <a href="" ng-click="sorting=''">Default</a> ]

<tr>

<th><a href="" ng-click="sorting = 'price'; reverse=!reverse">Price</a></th>

<th><a href="" ng-click="sorting = 'version'; reverse=!reverse">Version</a></th>

</tr>

<td>{{car.price}}</td>

<td>{{car.version}}</td>

</tr>

</table>

</div>

</body>

</html>