Filters in AngularJS

Filters in AngularJS could be one of the toughest part to work with in complex applications. They help in transforming the data to be displayed with the most simplest syntax to follow. AngularJS filters are mostly used in AngularJS expressions.

There are some predefined filters in the AngularJS library, most popular ones being – lowercase, uppercase, currency, filter and orderby.

Here, we will understand the basic usage of filters in AngularJS, through a simple ‘Students Percentage Calculator’ application. Though we can also create custom AngularJS filters specific to our needs, we will probably be exploring them in one of our upcoming articles.


So lets create a simple HTML file as:

And then there is the JS file, say myController.js

Make sure you include this JS file into your HTML file in a <script> tag.

Running this, I could see the output on my browser screen as:

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.