How to Create Custom Filters In AngularJS

AngularJs » on Mar 8, 2016 { 1 Comment } By Sivateja

In the previous article, we had a look at built-in Angular filters, these built-in filters will cover many common use cases, but you can also create your own filters in Angular ๐Ÿ™‚ byย writing logic based on your requirement.

Hmm for example, as per my requirement I need to reverse the string and capitalize the first letter. Lets see how to create custom filter for this requirement.

AngularJS Custom Filter Example

<!DOCTYPE html>
<script src=""></script>

 <div ng-app="java4sApp" ng-controller="java4sCtrl">
   Welcome to {{ name | java4sFilter }}

   angular.module('java4sApp', [])
      .controller('java4sCtrl', function($scope) {
          $ = "java4s"
             return function( str ) {
                   var revStr = str.split('').reverse();
                   return revStr[0].toUpperCase() + revStr.join('').slice(1);


Welcome to S4avaj

โ€‹ โ€‹โ€‹

You Might Also Like

  ::. About the Author .::

Sivateja Kandula - Java/J2EE Full Stack Developer
Founder of Java4s - Get It Yourself, A popular Java/J2EE Programming Blog, Love Java and UI frameworks.
You can sign-up for the Email Newsletter for your daily dose of Java tutorials.


One Response to “How to Create Custom Filters In AngularJS”
  1. Anuradha M says:

    Really superb… awesome…. Plz give some examples based on dependency injections……


By posting your answer, you agree to our comments policy.
Most Recent Posts from Top Categories
Spring Boot Hibernate Spring
Contact | About Us | Privacy Policy | Advertise With Us

© 2010 - 2022 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.