Hope you are doing good today.
Today on My blog, I am going to explain how you can create Custom Filters in AngularJS. Filters are an important part in AngularJS which used to format data
First Create an index.html page and put required library file in <head></head> section:
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
Here we are using ng-click directive, which changed the behavior when an element is clicked.
<h1>Custome Sorting</h1>
<h2>short data by Name & Country</h2>
<div ng-app="myapp" ng-controller="mycnt">
<table border='1'>
<tr>
<td>Sr.No</td>
<td ng-click="orderByMe('name')" ><b>Name</b></td>
<td ng-click="orderByMe('country')"><b>Country</b></td>
</tr>
<tr ng-repeat="x in names | orderBy :myOrderBy" >
<td>{{$index + 1}}</td>
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
AngularJS Script for shorting.
<script type="text/javascript">
var app=angular.module('myapp', []);
app.controller('mycnt', function($scope) {
//Assign the value
$scope.names = [
{name:'Ramesh',country:'India'},
{name:'Rafi',country:'India'},
{name:'Alex',country:'USA'},
{name:'Pooja',country:'India'},
{name:'Mahesh',country:'India'},
{name:'Ramanujam',country:'India'},
{name:'Johnson',country:'UK'},
{name:'Karl',country:'Russia'}
];
//send the value to orderByMe
$scope.orderByMe = function(x) {
$scope.myOrderBy = x;
}
});
</script>
I hope this will help you. Please feel free to give us your feedback in comments.
0 Comment(s)