Filters
AngularJS filters are used to transform the data for display.We can apply any transformation required to display the data.So filters are about the presentation of the data to the end user.
For example we can remove specific values from the displayed data.
We can apply filter to an expression in the view as
{{ expression | filter }}
Expression is followed by a pipe character and the filter name.This will apply the filter with the name “filter” to the expression.The specific data transformation applied to the expression depends upon the functionality provided by the filter.
Following will transform the string value of message to lowercase.lowercase is a built in filter in AngularJS.
{{message|lowercase}}
Chaining filters
Instead of applying a single filter to an expression we can apply multiple filters by chaining.In this case the result of filter1 is passed to filter2
{{ expression | filter1 | filter2 }}
Specifying filter arguments
If the filter is defined to take arguments then we can pass arguments as required to format the data.To pass the argument to the filter we specify the colon “:” and the argument value :
{{ expression | filter1:"argument" }}
In the above markup argument value “argument” will be passed to the filter “filter1”.
Built-In filters in AngularJS
There are many filters already provided by AngularJS.So if need to implement some functionality which is already provided by a built in filter we can use it instead of defining a custom filter.
Currency
We use the currency filter to format a number as currency.We use this filter as
{{ expression | Currency }}
If the expression value is 100 then it is formatted as $100.00
Number
Number filter formats the value as number.We can specify the decimal places we want to include in the number
{{expression|number:decimalPlaces}}
UpperCase and Lowercase string filters
As their name implies uppercase and lowercase filters converts a string to uppercase and lowercase respectively
{{expression|uppercase}}
{{expression|lowercase}}
Filtering and Sorting
These filters apply to a list of items.To filter items from list of items we use the “filter” filter and specify the items to filter by as arguments.We use this filter as
list|filter:search
Search is the argument we provide which specifies the value we want to search in the list.
To sort the list items we use the orderBy filter.We specify the value we want to order-by by specifying the argument to the orderBy filter.
list|orderBy:'value'
Following example uses the some of the built in filters:
<!DOCTYPE html>
<html lang="en-US">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.filter('makeUppercase', function () {
return function (item,st) {
return item.toLowerCase().substr(st, 4);;
};
});
app.controller('Ctrl',['$scope', function ($scope) {
$scope.message = 'Hello AngularJS';
$scope.numericValue = '100';
$scope.students=[
{name:'John',standard:'09'},
{name:'Mark',standard:'12'},
{name:'Frank',standard:'10'},
];
$scope.search={name:'John',standard:'09'};
}]);
</script>
<body>
<div ng-app="app" ng-controller="Ctrl">
<h1>{{message|makeUppercase:1}}</h1>
<h1>{{message|uppercase}}</h1>
<h1>{{message|lowercase}}</h1>
<h1>{{numericValue|currency}}</h1>
<h1>{{numericValue|number:4}}</h1>
<div ng-repeat="student in students|filter:search|orderBy:'standard'">
{{student.name}}
</div>
</div>
</body>
</html>
running the above example displays the following page
Defining a custom filter
If we require some functionality which is not provided by the built in filters then we can define custom filter.We define a custom filter as
var app = angular.module('app', []);
app.filter('FilterName', function () {
return function (arguments) {
//filter body
};
});
To define the filter we call the filter function of the angular module and pass a function.This function in turn returns a function which is the actual filter function.
We can also specify the parameters in the filter function.First parameter in the parameter list represents the data on which the transformation is to be
applied.Remaining parameters represents the extra arguments which are accepted by the filter.
Following example defines a filter called convertToUppercase.In the filter function on line 2 we are returning a function which defines the filter
app.filter('convertToUppercase', function () {
return function (item,st) {
return item.toLowerCase();
};
});
The above example is just for understanding about how to define a filter since a similar function is already provided by AngularJS called uppercase.
This was just a basic introduction to Filters in AngularJS. Filters can be used for different data transformation scenarios.For more complex scenarios we can use a chain of multiple filters.
Leave a Reply