In my previous article, we demonstrated how to use filter in AngularJS. This article demonstrates how to use AngularJS orderBy filter.
AngularJS Orderby
Getting StartedAngularJS orderBy filter allows sorting data in collection, it supports both ascending and descending order."+" operator is used to order data in ascending order and "-" operator is used to order data in descending order. "true" and "false" also used to order data in ascending and descending order in collection. If no operator is mentioned, it orders data in ascending order
Syntax in HTML {{ orderBy_expression | orderBy : expression : reverse : comparator}}
$filter('orderBy')(collection, expression, reverse, comparator)
<tr ng-repeat="student in students | orderBy:+Name"> //orders in asc
<tr ng-repeat="student in students | orderBy:-Name">//orders in desc
<tr ng-repeat="student in students | orderBy:Name:true">//orders in asc
<tr ng-repeat="student in students | orderBy:Name:false">//orders in desc
<tr ng-repeat="student in students | orderBy:Name">//orders in asc
In the above two type of syntax has been given. The first one is to use in html page and the second one is for AngularJS controller. In the below two example are given which describes how to use AngularJS order by fileter in HTML and controller.
Using AngularJS Orderby Filter in HTML
This example displays list of students in a table and has taken a dropdownbox to order student list in ascending or descending order. This dropdownbox contains name of columns as item, it contains two items for each column. One for making ascending order to table and other from making descending order to table.
<HTML ng-app = "myapp">
<TITLE> AngularJS learning(orderBy Filter)</TITLE>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope){
$scope.colname=" ";
$scope.students=[
{Name:"Kailash",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Sex:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Sex:"Female",Class:"2Std",Section:"B"}];
});
</script>
<BODY ng-controller="myappcont">
<h2>Student Details</h2>
<hr/>
<table border="1">
<caption>
Sort By : <select ng-model="colname">
<option value="Name">Name Asc</option>
<option value="-Name">Name Desc</option>
<option value="Sex">Sex Asc</option>
<option value="-Sex">Sex Desc</option>
<option value="Class">Class Asc</option>
<option value="-Class">Class Desc</option>
<option value="Section">Section Asc</option>
<option value="-Section">Section Desc</option>
</select><br/><br/>
</caption>
<tr>
<th>Name</input></th>
<th>Sex</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students | orderBy:colname">
<td>{{student.Name}}</td>
<td>{{student.Sex}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
Using AngularJS Orderby Filter in Controller
This example is doing same things like the above example, but uses $filter() method for sorting table data in controller. The sort button sorts the table record, it contains a function called sortBy() which sorts data using $filter() method. sortBy function takes selected item from DropdownBox which contains list of column names for sorting and calls $filter(). For details see the below example.
<HTML ng-app = "myapp">
<TITLE> AngularJS learning(orderBy Filter)</TITLE>
<script src="angular.min.js"></script>
<script>
var myapp=angular.module("myapp",[]);
myapp.controller("myappcont",function($scope,$filter){
$scope.colname="Name";
$scope.students=[
{Name:"Kailash",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyan",Sex:"Male",Class:"1Std",Section:"A"},
{Name:"Kalyani",Sex:"Female",Class:"1Std",Section:"A"},
{Name:"Kamal",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"Keshav",Sex:"Male",Class:"2Std",Section:"B"},
{Name:"KedarGouri",Sex:"Female",Class:"2Std",Section:"B"}];
$scope.students = $filter('orderBy')($scope.students, $scope.colname,true);
$scope.sortBy=function(){
$scope.students = $filter('orderBy')($scope.students, $scope.colname,false);
}
});
</script>
<BODY ng-controller="myappcont">
<h2>Student Details</h2>
<hr/>
<table border="1">
<caption>
Sort By : <select ng-model="colname">
<option value="Name">Name Asc</option>
<option value="-Name">Name Desc</option>
<option value="Sex">Sex Asc</option>
<option value="-Sex">Sex Desc</option>
<option value="Class">Class Asc</option>
<option value="-Class">Class Desc</option>
<option value="Section">Section Asc</option>
<option value="-Section">Section Desc</option>
</select> <button ng-click="sortBy()">Sort</button>
<br/><br/>
</caption>
<tr>
<th>Name</input></th>
<th>Sex</th>
<th>Class</th>
<th>Section</th>
</tr>
<tr ng-repeat="student in students">
<td>{{student.Name}}</td>
<td>{{student.Sex}}</td>
<td>{{student.Class}}</td>
<td>{{student.Section}}</td>
</tr>
</table>
</BODY>
</HTML>
 |
AngularJS Orderby Filter |
In this article we have demonstrated how to use orderBy filter in AngularJS, hope this article may helpful to you. Kindly give a comment for improvement of blogs.
Thanks