Dot Net Stuff

Applying Filters in Angular JS


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.

Problems Solutions
Create an AngularJS module. Use the angular.module method.
Set the scope of a module. Use the ng-app attribute.
Define a controller. Use the Module.controller method.
Apply a controller to a view. Use the ng-controller attribute.
Pass data from a controller to a view. Use the $scope service.
Define a directive. Use the Module.directive method.
Define a filter. Use the Module.filter method
Use a filter programmatically. Use the $filter method.
Define a service. Use the Module.service, Module.factory, or Module.provider method.
Define a service from an existing object or value. Use the Module.value method.
Add structure to the code in an application. Create multiple modules and declare dependencies from the module referenced by the ng-app attribute.
Register functions that are called when modules are loaded. Use the Module.config and Module.run methods.

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.

Keen to hear from you...!

If you have any questions related to what's mentioned in the article or need help with any issue, ask it, I would love to here from you. Please MakeUseOf Contact and i will be more than happy to help.

About the author

Anil Sharma is Chief Editor of dotnet-stuff.com. He's a software professional and loves to work with Microsoft .Net. He's usually writes articles about .Net related technologies and here to shares his experiences, personal notes, Tutorials, Examples, Problems & Solutions, Code Snippets, Reference Manual and Resources with C#, Asp.Net, Linq , Ajax, MVC, Entity Framework, WCF, SQL Server, jQuery, Visual Studio and much more...!!!

blog comments powered by Disqus