AngularJS Filters are used to modify the data according to user’s choice. These filters can be used with directives or expression using a pipe character.
Angular has a bunch of filters follows a defined syntax which is given below:
Basic syntax for filters:
{{data* | filter : option*}}Here we take some data and pipe that into a filter. sometimes we also specify the option for it.
Watch the live demo or download code from the link given below.
Filters available in AngulaJS :
1. Currency Filter:
Currency Filter converts a number into a proper currency format along with a currency symbol. By default, it show $ as a currency symbol but, we can change the currency symbol according to our requirement.
Syntax: {{ currency_expression | currency : symbol : fractionSize}}
Ex: {{12345 | currency}} = $12345
code:
<p>
<b>Enter prices</b>
</p>
<input type="text" name="aname" ng-model="price" placeholder="Enter prices">
<p >
<!-- Here we pipe the numerical data into the currency filter-->
<b>Output: </b>
{{price|currency}}
</p>
Note : Symbol and fractionSize are two optional parameter in which symbol decided the currency symbol to be used and fractionSize is used to fix the number of fraction of decimal points.
2. Uppercase Filter:
Uppercase Filter converts a string into uppercase. This filter just accepts a string which is passed through a pipe symbol “|” and made available to uppercase filter where the whole string will get converted into uppercase.
Syntax: {{data_string | uppercase}}
Ex: {{‘John’ | uppercase}} = JOHN
Code:
<p>
<b>Enter a string</b>
</p>
<input type="text" name="aname" ng-model="uname" placeholder="Enter name in lowercase">
<p >
<b>Output: </b>
<!-- Here we accept a string and pipe that into the uppercase filter-->
{{uname | uppercase}}
</p>
3. Lowercase Filter:
Lowercase Filter converts an uppercase string into lowercase.
Syntax: {{data_string | lowercase}}
Ex: {{‘JOHN’ | lowercase}} = john
Code:
<p>
<b>Enter a string</b>
</p>
<input type="text" name="aname" ng-model="lname" placeholder="Enter name in upercase">
<p>
<b>Output: </b>
<!-- Here we accept a string and pipe that into the lowercase filter-->
{{ lname | lowercase }}
</p>
4. Filter :
Filter selects a subset of the item from a JSON or Javascript Object’s array and return output in the form of an array. The condition for selecting subset is given by the user.
syntax: {{ filter_expression | filter : expression }}
Ex: {{ friends in friends | filter : ‘ jh’ }}
Above example returns all values of an array containing ‘jh’ word with in it.
Code:
<!-- Here we fetch a element from array and pipe that into the filter-->
<p ng-repeat="friend in friends|filter:{name:snme}" >
{{friend.name}}
{{friend.age}}
</p>
Note: There are various optional parameter for expression, it may be a string (‘jh’) or may be an object like {name:“M”} to filter a particular index of array having property [name] containing ‘M’.
5. OrderBy Filter:
orderBy filter is used to sort the list of data, string or numbers in a particular order,e.g Ascending or Descending. It orders alphabetically for the string and numerically for numbers.
syntax: {{ orderBy_expression | orederBy : expression : reverse }}
Ex: {{ friend in friends | orderBy : name : false }}
Above filter ordered the list of friends according to their name in alphabetical order.
Code:
<!-- Here we fetch a element from array and pipe that into the orderBy filter-->
<p ng-repeat="friend in friends|orderBy: selct : false">
{{friend.name}}
{{friend.age}}
</p>Note: Expression can accept many possible values such the property of an object or it may be a string as an angular expression which’s solution is used for filtering purpose.
6. LimitTo Filter:
LimitTo filter used to create a new array of specified element or a string containing a specific number of element. The number or characters are taken from beginning of the element or from the end of the element. It depends on the sign (+,-) provided to limit.
syntax: {{ data_tolimit | limitTo : limit : begin }}
Ex: {{ ‘johncena’ | limitTo: 5 } =johnc
Code:
<input type="text" name="aname" ng-model="lminput" placeholder="Enter a name">
<input type="number" step="1" ng-model="Limitto" value="2">
<p>
<b>Output: </b>
<!-- Here we accept a string from user and pipe that into the limitTo filter-->
{{lminput|limitTo:Limitto}}
</p>
Note: Limit accepts the length of returning array or string and the begin accept the number of the index from where the begin limitation starts. If the value of begin is negative, then it indicates the number of offset from the end of string or array from where to limitation applied.
7. Date Filter:
Date filter formats the date into the string according to given format.
syntax: {{ date_expression | date : format : timezone}}
Ex: {{‘1288323623006' | date:”MM/dd/yyyy ‘at’ h:mma”}} = 10/29/2010 at 9:10
Code:
<span>
{{'1288323623006' | date:"MM/dd/yyyy 'at' h:mma"}}
</span>
Note: Above filter accept the date and convert into the string by given format. There are various date formate available. Timezone accepts UTC/GMT and it is used to format the date.
Complete code for all filters:
HTML File: index.html
<html ng-app = "mainApp">
<head>
<title>Filters in AngularJS</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script>
//Javascript code to switch between filters
function call(data) {
$('.non').css('display', 'none');
$('#' + data).css('display', 'block');
$('td.active').removeClass('active');
$('.' + data).addClass('active');
}
</script>
</head>
<body >
<center> <h1 class="h1">AngularJS-Filters Demo</h1> </center>
<div class="container">
<div class="demo-wrapper row">
<!--Code to genrate a table contains list of many filters-->
<table class="col-md-3 col-md-offset-3 col-xs-12" border="1" >
<thead><tr><td><strong>Filters</strong></td></tr></thead>
<tr><td class="currfilter active" id="activefilter" onclick="call('currfilter');">Currency filter</td></tr>
<tr><td class="upperfilter" onclick="call('upperfilter');">Uppercase Filter</td></tr>
<tr><td class="lowfilter" onclick="call('lowfilter');">Lowercase Filter</td></tr>
<tr><td class="filtfilter" onclick="call('filtfilter');">Filter</td></tr>
<tr><td class="orderfilter" onclick="call('orderfilter');">orderBy Filter</td></tr>
<tr><td class="limittofilter" onclick="call('limittofilter');">limitTo Filter</td></tr>
</table>
<div class="col-md-4 col-md-offset-0 col-xs-12">
<div id="seen">
<!--Code for currency filter starts-->
<div id="currfilter" class="non default">
<div class="login">
<h2>Currency Filter</h2>
<hr/>
<p><b>Enter prices : </b></p>
<input type="text" name="aname" ng-model="price" placeholder="Enter prices">
<p ><b>Output : </b>{{price|currency}}</p>
</div>
</div>
<!--Code for currency filter ends-->
<!--Code for uppercase filter starts-->
<div id="upperfilter" style="display:none" class="non">
<div class="login">
<h2>Uppercase Filter</h2>
<hr/>
<p><b>Enter a string : </b></p>
<input type="text" name="aname" ng-model="uname" placeholder="Enter name in lowercase">
<p ><b>Output : </b>{{uname|uppercase}}</p>
</div>
</div>
<!--Code for uppercase filter ends-->
<!--Code for lowercase filter starts-->
<div id="lowfilter" class="non" style="display:none">
<div class="login">
<h2>Lowercase Filter</h2>
<hr/>
<p><b>Enter a string : </b></p>
<input type="text" name="aname" ng-model="lname" placeholder="Enter name in upercase">
<p><b>Output: </b>{{lname|lowercase}}</p>
</div>
</div>
<!--Code for lowercase filter ends-->
<div ng-controller = "fetchdetails">
<!--Code for filter starts-->
<div id="filtfilter" class="non" style="display:none">
<div class="login">
<h2>Filter</h2>
<hr/>
<p ><b>Search by Name : </b></p><input type="text" name="aname" ng-model="snme" value="" placeholder="Enter a string">
<ul class="friend_info">
<li class="left info_heading">Name</li>
<li class="right info_heading">Age</li>
<li ng-repeat="friend in friends|filter:{name:snme}" >
<div class="left">{{friend.name}}</div>
<div class="right">{{friend.age}}</div>
</li>
</ul>
<br/>
<p><b>Search by Age : </b></p><input type="text" name="aname" ng-model="sage" value="" placeholder="Enter a number">
<ul class="friend_info">
<li class="left info_heading">Name</li>
<li class="right info_heading">Age</li>
<li ng-repeat="friend in friends|filter:{age:sage}">
<div class="left">{{friend.name}}</div>
<div class="right">{{friend.age}}</div>
</li>
</ul>
</div>
</div>
<!--Code for filter ends-->
<!--Code for orderBy filter starts-->
<div id="orderfilter" class="non" style="display:none">
<div class="login">
<h2>orderBy Filter</h2>
<hr/>
<p ><b>Select an option : </b></p>
<select ng-model="select">
<option value="" disabled selected>Select your option</option>
<option value="name">Name</option>
<option value="age">Age</option>
</select>
<ul class="friend_info">
<li class="left info_heading">Name</li>
<li class="right info_heading">Age</li>
<li ng-repeat="friend in friends|orderBy: select">
<div class="left">{{friend.name}}</div>
<div class="right">{{friend.age}}</div>
</li>
</div>
</div>
<!--Code for orderBy filter ends-->
<!--Code for limitTo filter starts-->
<div id="limittofilter" class="non" style="display:none">
<div class="login">
<h2>limitTo Filter</h2>
<hr/>
<p><b>Enter a name : </b></p>
<input type="text" name="aname" ng-model="lminput" placeholder="Enter a name"><br/>
<input type="number" step="1" ng-model="Limitto" value="2" class="limitTo">
<p><b>Output : </b> {{lminput|limitTo:Limitto}}
</p>
</div>
</div>
<!--Code for limitTo filter ends-->
</div>
</div>
</div>
</div>
</div>
</body>
</html>Javascript: app.js
var mainApp = angular.module("mainApp", []);
mainApp.controller("fetchdetails", function($scope) {
$scope.Limitto = 3;
$scope.friends=[{name:'john',age:22},{name:'Aadam',age:25},{name:'Aadi',age:28},{name:'James',age:19}];
});CSS: style.css
@import url(http://fonts.googleapis.com/css?family=Raleway);
.demo-wrapper{
min-height: 900px;
min-width: 300px;
}
ul{
list-style: none;
}
li {
height: 10px;
padding: 5px;
height: 20px;
}
li:last-child{
margin-bottom: 10px;
}
li.info_heading {
font-size: 16px;
font-weight: 600;
height: 30px;
margin-top: 5px;
}
.left{
float: left;
width: 50%;
}
.right{
float: right;
width: 50%;
}
.h1 {
margin: 40px auto !important;
}
.login h2{
background-color: #FEFFED;
text-align:center;
border-radius: 10px 10px 0 0;
margin: -10px -40px;
padding: 15px;
}
.login hr{
border:0;
border-bottom:1px solid #ccc;
margin: 10px -40px;
margin-bottom: 10px;
}
.login{
width:100%;
border-radius: 10px;
font-family:raleway;
border: 2px solid #ccc;
padding: 10px 40px 40px;
word-wrap: break-word;
}
.login p{
margin-top:8px;
font-size:16px;
}
.login hr {
margin-bottom: 30px;
}
input[type=text],input[type=number]{
width:99.5%;
padding: 10px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
select{
width:99.5%;
padding: 10px;
margin-top: 8px;
border: 1px solid #ccc;
padding-left: 5px;
font-size: 16px;
font-family:raleway;
}
table{
width:300px;
margin-bottom: 15px;
border: 2px solid #ccc;
}
thead td{
background-color:#FFCB00;
text-align:center;
padding:15px;
}
tbody tr td {
text-align:center;
padding:15px;
}
tbody tr td:hover{
background-color:#FEFFED;
}
td.active {
background: #FEFFED;
}
.non{
display:none;
}
.default{
display:block;
}
.limitTo{
margin-top: 10px;
}
Conclusion:
I hope that at this point you must be feeling yourself comfortable with AngularJS filter. Please comment for any query. Keep visiting our website.
