What is an AngularJS filter?
AngularJS filter
formats the value of an expression (i.e. user entered value, database value, Input
field value) for display to the user.
Filters can
be used in view templates, controllers, services, you can create your own
custom filters easily.
Filter Syntax:
{{expression | filter }}
Filters with Argument:
You can
create filters with arguments if required, that is allowed by AngularJS.
Syntax:
{{ expression | filter:argument1:argument2:... }}
Filter Chaining:
Filters can
be applied to the result of another filter, called as “Chaining” filters.
Syntax:
{{ expression | filter1 | filter2 | ... }}
Filter components provided by AngularJS
Following
are some filter components provided by AngularJS
Sr.No.
|
Name
|
Description
|
1
|
filter
|
Select subset of elements from source array
and create new array based on provided criteria.
|
2
|
orderby
|
Orders the array by the expression predicate,
or specified expression criteria.
|
3
|
Number
|
Formats a number as text.
|
4
|
uppercase
|
Converts a text to upper case text.
|
5
|
lowercase
|
Converts a text to lower case text.
|
6
|
currency
|
Formats text in a currency format.
|
7
|
date
|
Formats date to a string based on the
requested format.
|
8
|
limitTo
|
a. Allows you to create new array or string containing
only a specified number of elements.
b. The array elements are considered either
from beginning or end of source (array, string, numbers), specified by the
value and sign (positive or negative) of limit.
c. If you are using input filed then its value is
converted into string.
|
9
|
json
|
Allows you to convert a JavaScript object
into JSON string.
|
Example:
in following example i used below filters
a. filter
b. uppercase
c. lowercase
d. number
e. date
f. currency
I will explain Jason and limitTo
filters in separate tutorials with example.
<body>
<div ng-app="myApp" ng-controller="EmployeeController">
Id: {{Employee.id}}
<br />
<!--lowercase filter -->
User Name:{{Employee.userName
|
lowercase}}
<br />
<!--date filter -->
Birth Date:{{Employee.BirthDate | date:'medium' }}
<br />
<!--number filter -->
Package:{{Employee.Package
|
number
}}
<!--upparcase filter -->
<br />
Name:<span ng-bind="Employee.name | uppercase"></span>
<p>Designation: {{Employee.Designation}}</p>
<!--currency filter -->
<p>Payment: {{Employee.Payment
|
currency}}</p>
<!--orderBy filter -->
<ul>
<li data-ng-repeat="myObject in Employee.Projects |
orderBy:'name'">id:{{myObject.id}} name:{{myObject.name}}
Team Size:{{myObject.TeamSize}}</li>
</ul>
<!--filter data using filter component
disply active and suspended projects accroding to search inputs-->
<label>Search: <input type="checkbox" ng-model="Employee.Projects.isActive"></label>
<ul>
<li data-ng-repeat="myObject in Employee.Projects | filter:Employee.Projects.isActive">id:{{myObject.id}}
name:{{myObject.name}}
Team Size:{{myObject.TeamSize}}</li>
</ul>
</div>
<script>
var app =
angular.module('myApp', []);
var dateOut = new Date('1985-04-05 12:08:15.773');
app.controller('EmployeeController', ['$scope', function ($scope) {
$scope.Employee = {
id: 1,
userName:'sKendre;',
name: 'Shourya Kendre',
BirthDate:
dateOut,
Package:52503.30,
Designation: 'Team Leader',
Payment: 700,
Projects: [
{ id: 1, name:
'E shop', TeamSize: 5 ,isActive:true},
{ id: 2, name:
'Employee Notifier', TeamSize: 3, isActive: true },
{ id: 3, name:
'CRM',
TeamSize: 10, isActive: false }
]
};
}]);
</script>
</body>
Date formats filter supports following
string formats
a. medium:
equivalent to 'MMM d, y h:mm:ss a' for en_US locale (e.g. Sep 3, 2010 12:05:08
PM)
b. short:
equivalent to 'M/d/yy h:mm a' for en_US locale (e.g. 9/3/10 12:05 PM)
c. fullDate:
equivalent to 'EEEE, MMMM d, y' for en_US locale (e.g. Friday, September 3,
2010)
d. longDate:
equivalent to 'MMMM d, y' for en_US locale (e.g. September 3, 2010)
e.
mediumDate: equivalent to 'MMM d, y' for en_US locale (e.g. Sep 3, 2010)
f. shortDate:
equivalent to 'M/d/yy' for en_US locale (e.g. 9/3/10)
g.
mediumTime: equivalent to 'h:mm:ss a' for en_US locale (e.g. 12:05:08 PM)
h. shortTime:
equivalent to 'h:mm a' for en_US locale (e.g. 12:05 PM)
Syntax:
{{date_expression | date : format : timezone}}
In this post i explained AngularJS filters basic with sample example in separate post i will explain in Stateful filters and creating your own custom filters.
Reference
used:
https://angularjs.org