home
AngularJs Tutorials Banner

Angularjs Filters

Filters are the most commonly used directive. Angularjs filters is used to format data to present the needed value to the user. And data will be shown as readable format, when we have currency values or any other values like decimals.

Here we have angularjs filters list, please check with one by one.

Filter Name
Filter Description
date Format variable as a date according to the given date.
currency Format a number to a currency with a currency symbol.
filter Select a subset of items from an array.
lowercase Format a string to lower case.
orderBy Orders an array by an expression.
uppercase Format a string to upper case.
json converts the variable into JSON string.

Here we have simple example with above all filters like, currency, filter, lowercase, uppercase, orderBy and date. So try the below example with different value and practice and play with angularjs filters.

A filter can be added to an expression with a pipe character (|) and a filter
<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Welcome to AngularJS</title>
</head> 
<body>
<div ng-init="persons=[
{name:'Mike zio', age:23, salary:25000},
{name:'mark VK Ab', age:36, salary:644000},
{name:'Obama', age:43, salary:500000},
{name:'Jhon Ab', age:23, salary:3000},
{name:'larry page Ab', age:36, salary:4000},
{name:'Robert WZ', age:65, salary:9000}]">

<input type="text" ng-model="search">

<table cellpadding="10">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Currency</th>
<th>rs Number</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in persons | limitTo:5 | filter:search | orderBy:'salary'">
<td>{{person.name | uppercase}}</td>
<td>{{person.age}}</td>
<td>{{person.salary | currency}}</td>
<td>RS - {{person.salary | number}}</td>
</tr>
</tbody>
</table>

<ul>
<li>{{132456786543 | date}}</li>
<li>{{'2016-09-12' | date:'fullDate'}}</li>
<li>{{'2016-09-12' | date:'medium'}}</li>
<li>{{'2016-09-12' | date:'shortTime'}}</li>
</ul>
<div>{{persons | json}}</div>

</div>

<script> src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
</body>
</html>

Output of the above code

Name Age Currency rs Number
{{person.name | uppercase}} {{person.age}} {{person.salary | currency}} RS - {{person.salary | number}}

Angularjs filter Date Demo

  • {{132456786543 | date}}
  • {{'2016-09-12' | date:'fullDate'}}
  • {{'2016-09-12' | date:'medium'}}
  • {{'2016-09-12' | date:'shortTime'}}

Angularjs filter Json Demo

{{persons | json}}