Filters are applied in template expressions contained in views. The data binding or expression is followed by a bar (the | character) and then the name of the filter. Filters in Angular JS are used in views to format the data displayed to the user. Once a filter is defined, it can be used throughout a module, which means we can use them to ensure consistency in data presentation across multiple controllers and views.
To apply a filter in AngularJS the expression is followed by a bar (the | character) and then the name of the filter, as given in following example.
Today is {{day || "(unknown)" | dayName}}
Tomorrow is {{day || "(unknown)" | dayName}}
The filter method is used to define a filter
, and the arguments are the name of the new filter and a factory
function that will create the filter when invoked. Filters are themselves functions, which receive a data value and
format it so it can be displayed.
My filter is called dayName
, and we have used it to consolidate the code that transforms the numeric day of the week that we get from the Date
objects into a name. My factory function defines the array of weekday names and returns a function that uses that array to transform numeric values:
...
return function (input) {
return angular.isNumber(input) ? dayNames[input] : input;
};
...
We had use the angular.isNumber
method when dealing with a numeric value and return the day name . (To keep the example simple, We are not checking for values that are out of bounds.)
...
Today is {{day || "(unknown)" | dayName}}
...
Filters are applied after JavaScript expressions are evaluated, which allows me to use the || operator to check
for null
values and then the | operator to apply the filter. The result of this is that the value of the day
property will be
passed to the filter function if it is not null
, and if it is, then (unknown) will be passed instead, which is why I used the
isNumber
method.
As this article is also a part of Concepts while working with Angular JS Application . So, you must read other tutorials in order to complete understanding to developing Angular JS Application. Since, we are going to learn several concepts. That's why I have broken this article into several small article. Which allow us to easily understand several Angular JS features and concepts. Following are the list of articles.
Summary: You should read above mentioned articles in order to completely understanding to developing an Angular JS application. This article is a part of Concepts while working with Angular JS Application, which is divided in to pieces of tutorials in order to understand easily. I hope you will like this article and find it useful.