Introduction: In this article I am going
to explain how to bind JSON data to HTML table using ng-repeat and sort data in
ascending or descending order on clicking of ascending/ descending arrow icons
placed in table header.
In previous articles i explained How to Implement search filter on specific column or all table in AngularJs and Get checkboxlist selected item text and values as comma separated string inAngularJS and Bind dropdownlist and get selected item value and text in AngularJs and Bind checkboxlist using ng-repeat in AngularJs and Add textbox search functionality in asp.net checkboxlist using jquery
Implementation:
Let’s create a sample html page to bind table and implement sorting. By default
data is sorted by book title. But we can also sort data by author and price.
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<style>
body {
padding-top: 30px;
}
.sortorder:after {
content: '\25b2';
}
.sortorder.descending:after {
content: '\25bc';
}
</style>
</head>
<body>
<div class="container" ng-app="bookApp" ng-controller="bookController">
<table class="table table-bordered
table-striped table-hover">
<thead>
<tr>
<td style="width: 70px;">Sr. No.</td>
<td ng-click="sort('title')">Book Title
<span class="sortorder descending" ng-hide="(sortKey=='title' &&
reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='title'
&& reverse==false)"></span>
</td>
<td ng-click="sort('author')">Author
<span class="sortorder descending" ng-hide="(sortKey=='author' &&
reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='author'
&& reverse==false)"></span>
</td>
<td ng-click="sort('price')">Price
<span class="sortorder descending" ng-hide="(sortKey=='price' &&
reverse==true)"></span>
<span class="sortorder" ng-hide="(sortKey=='price'
&& reverse==false)"></span>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="book in bookList |
orderBy: sortKey:reverse">
<td>{{ $index +1 }}</td>
<td>{{ book.title }}</td>
<td>{{ book.author }}</td>
<td>{{ book.price }}</td>
</tr>
</tbody>
</table>
</div>
<script>
var bookApp = angular.module("bookApp", []);
bookApp.controller('bookController', function ($scope) {
$scope.bookList = [
{ "title": "Hobbit", "author": "Aman", "price": 700 },
{ "title": "Lord of the
rings", "author": "Sameer", "price": 1000 },
{ "title": "Harry Porter", "author": "Anuj", "price": 650 },
{ "title": "The little
prince", "author": "Jatin", "price": 870 },
{ "title": "Angels and
Demons", "author": "Shivam", "price": 890 }
];
$scope.reverse = false;
$scope.sortKey = 'title';
$scope.sort = function (keyname) {
$scope.sortKey = keyname;
$scope.reverse =
!$scope.reverse;
}
});
</script>
</body>
</html>
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..