AngularJS has various filters which make easier to search and sort the data.
In the tutorial, I am using orderBy filter to change sort order when column header gets clicked.
Contents
1. orderBy filter
Return a sorted Array based on the item. You can change the sorting order by specifying the reverse parameter.
Syntax –
{{ orderBy_expression | orderBy : expression : reverse }}
orderBy Parameters –
Expression
It contains the name of an item by which data get sorted for e.g. sorting Array by name. The item should be declared in an Array.
You may think it as a key name.
reverse
It is an optional parameter, it takes Boolean value which is default set to false for ascending, For descending set it true.
There is another way to do this, by using + and –
ng-repeat="friend in friends | orderBy: '+sno' "
Sort in ascending order.
ng-repeat="friend in friends | orderBy: '-sno' "
Sort in descending order.
2. HTML
Defining ng-app directive in <html> and ng-controller directive to <body>.
Create an <table> element which contains 4 column and each header column contain ng-click directive for detecting click event and ng-class directive for adding up and down arrow.
ng-click and ng-class directives contain a function which takes the key name as a parameter.
Using ng-repeat directive to get data from friends Array and creating new rows. ng-repeat also, contain a filter by which sort the table.
Completed Code
<!doctype html>
<html ng-app='myApp'>
<head>
<title>Sort the table on header click using AngularJS</title>
<link href="style.css" rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js" type='text/javascript'></script>
<script src='controller.js' type='text/javascript'></script>
</head>
<body ng-controller="myController">
<table border='1'>
<tr >
<th ng-click='sortColumn("sno")' ng-class='sortClass("sno")'>S.no</th>
<th ng-click='sortColumn("name")' ng-class='sortClass("name")'>Name</th>
<th ng-click='sortColumn("age")' ng-class='sortClass("age")'>Age</th>
<th ng-click='sortColumn("gender")' ng-class='sortClass("gender")'>Gender</th>
</tr>
<tr ng-repeat='friend in friends|orderBy:column:reverse'>
<td width='20%' align='center'>{{friend.sno}}</td>
<td width='35%' align='center'>{{friend.name}}</td>
<td width='20%' align='center'>{{friend.age}}</td>
<td width='25%' align='center'>{{friend.gender}}</td>
</tr>
</table>
</body>
</html>
3. Controller
Create a new controller.jsscript.
Create a friends Array which contains data which we used to show in table element using ng-repeat directive.
And also defined 4 more $scope variables – column, reverse, sortColumn, and sortClass.
- column – It contain the key from friends Object by which table is sorting, it is default set to
sno. - reverse – For detecting ascending or descending ordering. The default value set to false for ascending.
- sortColumn – It contains a function, which called when table header clicked, it takes the key name as a parameter. Using this function change the default value of above-created properties.
- sortClass – It also contains a function which takes the key name as a parameter. This function returns class name based on the expression.
Within function checking the function parameter value is equal to column property or not if it is equal, then check the reverse property if it is set to true then return arrow-down from function otherwise arrow-up.
If the parameter is not equal to column property then return an empty value.
Completed Code
// Module
var app = angular.module('myApp',[]);
// Controller
app.controller('myController',function($scope){
// Object
$scope.friends = [
{sno:1,name:'Yogesh Singh',age:23,gender:'Male'},
{sno:2,name:'Sonarika Bhadoria',age:23,gender:'Female'},
{sno:3,name:'Vishal Sahu',age:24,gender:'Male'},
{sno:4,name:'Sanjay Singh',age:22,gender:'Male'}
];
// column to sort
$scope.column = 'sno';
// sort ordering (Ascending or Descending). Set true for desending
$scope.reverse = false;
// called on header click
$scope.sortColumn = function(col){
$scope.column = col;
if($scope.reverse){
$scope.reverse = false;
$scope.reverseclass = 'arrow-up';
}else{
$scope.reverse = true;
$scope.reverseclass = 'arrow-down';
}
};
// remove and change class
$scope.sortClass = function(col){
if($scope.column == col ){
if($scope.reverse){
return 'arrow-down';
}else{
return 'arrow-up';
}
}else{
return '';
}
}
});
4. CSS
For displaying up and down arrows when Table header clicks defined arrow-up and arrow-down classes.
Completed Code
/*table */
table{
border-collapse: collapse;
}
table th,table td{
padding: 3px;
}
table th:hover{
cursor: pointer;
}
.arrow-down:after,.arrow-up:after{
content: ' ';
position: relative;
left: 2px;
border: 8px solid transparent;
}
.arrow-down:after{
top: 10px;
border-top-color: black;
}
.arrow-up:after{
bottom: 15px;
border-bottom-color: black;
}
.arrow-down,.arrow-up{
padding-right: 10px;
}
5. Demo
Click on the header column name to sort.
6. Conclusion
Use orderBy filter to sort the content of the table when table header gets clicked.
With ng-repeat directive display content on table element and define ng-click directive on each header column for detecting click event on table header.
