AngularJs orderBy Filter example – onlinecode
In this post we will give you information about AngularJs orderBy Filter example – onlinecode. Hear we will give you detail about AngularJs orderBy Filter example – onlinecodeAnd how to use it also give you demo for it if it is necessary.
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 - onlinecode</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('onlinecodeApp', []).controller('onlinecodeCtrl', 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="onlinecodeApp" ng-controller="onlinecodeCtrl">
<h2>Click name's column or country's column to change the sorting order</h2>
<div >
<table >
<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>Hope this code and post will helped you for implement AngularJs orderBy Filter example – onlinecode. 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