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.
[embedyt] https://www.youtube.com/watch?v=OvjMuSKpLGc[/embedyt]
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>