AngularJs orderBy Filter example

June 12, 2019 XpertPhp Comments 0 Comment

In this tutorial, We will inform you how to create orderBy filter in angular. Now, We will learn to sort the data in ascending and descending order using the angularjs.

So we will first take a table using the bootstrap and arrange the code like below example. here below example in we taken a names array, and that array in we passed the name and country data.

Whenever you will click on the name’s column or country’s column then will call the orderByMe function and return the data and display it.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Angular orderBy Filter example - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
  <script>
	angular.module('XpertPhpApp', []).controller('XpertPhpCtrl', function($scope) {
		$scope.names = [
			{name:'Jani',country:'Norway'},
			{name:'Carl',country:'Sweden'},
			{name:'Margareth',country:'England'},
			{name:'Hege',country:'Norway'},
			{name:'Joe',country:'Denmark'},
			{name:'Gustav',country:'Sweden'},
			{name:'Birgit',country:'Denmark'},
			{name:'Mary',country:'England'},
			{name:'Kai',country:'Norway'}
			];
		$scope.orderByMe = function(x) {
			$scope.myOrderBy = x;
		}
	});
	</script>
</head>
<body ng-app="XpertPhpApp" ng-controller="XpertPhpCtrl">
	<h2>Click name's column or country's column to change the sorting order</h2>
	<div class="container">
		<table class="table table-bordered">
			<thead>
			  <tr>
				<th ng-click="orderByMe('name')">Name</th>
				<th ng-click="orderByMe('country')">Country</th>
			  </tr>
			</thead>
			<tbody>
			  <tr ng-repeat="x in names | orderBy:myOrderBy">
				<td>{{x.name}}</td>
				<td>{{x.country}}</td>
			  </tr>
			</tbody>
		</table>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Angular orderBy Filter example - XpertPhp</title>

angular.module('XpertPhpApp', []).controller('XpertPhpCtrl', function($scope) {

$scope.names = [

{name:'Jani',country:'Norway'},

{name:'Carl',country:'Sweden'},

{name:'Margareth',country:'England'},

{name:'Hege',country:'Norway'},

{name:'Joe',country:'Denmark'},

{name:'Gustav',country:'Sweden'},

{name:'Birgit',country:'Denmark'},

{name:'Mary',country:'England'},

{name:'Kai',country:'Norway'}

];

$scope.orderByMe = function(x) {

$scope.myOrderBy = x;

}

});

</script>

</head>

<h2>Click name's column or country's column to change the sorting order</h2>

<thead>

<tr>

<th ng-click="orderByMe('country')">Country</th>

</tr>

</thead>

<tbody>

<td>{{x.country}}</td>

</tr>

</tbody>

</table>

</div>

</body>

</html>

Show Demo

Please follow and like us:

Related posts: