AngularJS filters | Standard filters in AngularJS || Custom Filter in AngularJS
AngularJS filters :
AngularJS filters are used to display the data in a proper format or a specific format. Like Format a number to a currency format, Format a string to uppercase or lowercase and so on.
In this tutorial, I am going to show you
- AngularJS standard filters.
- AngularJS custom filters.
- how to use angularJs filters.
AngularJS standard filters
AngularJs provide some predefined filters Like
- Uppercase and lowercase
- OrderBy
- Currency
- Date Format
- JSON Format
Let’s see a complete example with source code for AngularJS standard filters
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.var1 = "Codebun.com";
$scope.var2 = "AngularJS";
//-------------orderBy
$scope.names = [
{name:'asd',city:'chennai'},
{name:'ghj',city:'bhopal'},
{name:'ert',city:'indore'},
{name:'gfhj',city:'indore'},
{name:'yui',city:'demo'},
{name:'wer',city:'ujjain'} ];
//-------------currency filter
$scope.price = 88;
//-------------date filter
$scope.date = new Date();
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
<p>
{{var1 | uppercase}}
{{var2 | lowercase}}
</p>
<h1>OrderBy filer</h1>
<h3 ng-repeat="x in names | orderBy:'name'">
{{ x.name + ', ' + x.city }}</h3>
<h1>currency filter</h1>
{{price | currency}}
<h1>Date filter</h1>
<p>Date = {{ date | date }}</p>
</body>
</html>
AngularJS custom filters.
We can create custom filters in angularJs let’s see how the code looks like.
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp',[]);
app.filter('myFormat', function() {
return function(x) {
return x + " codebun.com"; }
});
app.controller('myCtrl',function($scope){
$scope.y ="AngularJs with";});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl" >
{{y |myFormat}}
</body>
</html>
