Custom Filters in AngularJS

As we are already familiar to what are Filters in AngularJS and their purpose, we must also know that filters do not have a limited capability. There is much more to what the pre-defined AngularJS filters provide, to an extent where we can create one for our own and armor it to serve specific to what is needed. These are said to be the Custom Filters in AngularJS.

Considering a very simple example, lets assume that we are delivering an application to some school management, who wants the data entry guy to generate the username of each student for some school portal access, based on their first and last names entered. So if the name of the student is Abhishek Kumar, the generated username should be abhishek_kumar.

For this, lets first get some interface ready over which we will be writing the AngularJS code.

Now the AngularJS for the above HTML should be like:

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:

Custom AngularJS Filters

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.