AngularJS – sorting(using orderby filter) table data example with demo
In this post we will give you information about AngularJS – sorting(using orderby filter) table data example with demo. Hear we will give you detail about AngularJS – sorting(using orderby filter) table data example with demoAnd how to use it also give you demo for it if it is necessary.
Data sort in one of the most important and essential component in any web based projects. we can find data in order by any field then we can find any data easily from reach data.
In this post, we can learn how to sort table row using AngularJS orderby filter. in bellow example you can see we have two column one for language and another for total developer. So if you click on table heading then you can sort data using orderBy filert. You can learn and see bellow example.
Example
<html lang="en-US">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<h2 >AngularJS sortable table example</h2>
<div >
<strong>Note:</strong> click on table heading and change order
</div>
<div >
<table >
<tr>
<th ng-click="sortBy('language')">Language</th>
<th ng-click="sortBy('developer')">Total Developer</th>
</tr>
<tr ng-repeat="x in names | orderBy:sortField:reverseOrder">
<td>{{ x.language }}</td>
<td>{{ x.developer }}</td>
</tr>
</table>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$scope.names = [
{'language': 'PHP', 'developer': '11' },
{'language': 'Laravel', 'developer': '12'},
{'language': 'Angular JS', 'developer': '23'},
{'language': 'Jquery', 'developer': '25'},
{'language': 'Java', 'developer': '21'},
{'language': 'Facebook API', 'developer': '26'},
];
$scope.reverseOrder = true;
$scope.sortField = 'developer';
$scope.sortBy = function(sortField) {
$scope.reverseOrder = ($scope.sortField === sortField) ? !$scope.reverseOrder : false;
$scope.sortField = sortField;
};
});
</script>
</body>
</html>
You can try….
Hope this code and post will helped you for implement AngularJS – sorting(using orderby filter) table data example with demo. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs