How to sorting data by using orderby filter in AngularJS?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you How to sorting data by using orderby filter in AngularJS? We know that data sort in one of the most important and also essential component for any web based application. If we can find the data in order by any field then we can find the any data easily from reach to data.

Now in this post, we will learn about how to sort the table row by using AngularJS orderby filter. Now in the bellow example we can see about we have two column one for language and another for total developer. So if we click on table heading then we can sort data by using orderBy filert. We can learn and see in the 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> 

Read Also : How to Use Group by year month using Laravel Query Builder ?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →