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>

 

 

Add a Comment

Your email address will not be published. Required fields are marked *

two × 3 =