AngularJS Sorting(using Orderby Filter) Table Data Example
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 class="text-center">AngularJS sortable table example</h2>
<div class="text-center">
<strong>Note:</strong> click on table heading and change order
</div>
<div class="container">
<table class="table table-bordered">
<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....
