Newsletter

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>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

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

 <script>
   angular.module('java4sApp', [])
      .controller('java4sCtrl', function($scope) {
          $scope.name = "java4s"
       })
       .filter('java4sFilter',function(){
             return function( str ) {
                   var revStr = str.split('').reverse();
                   return revStr[0].toUpperCase() + revStr.join('').slice(1);
              }
   });
</script>
</body>
</html>

Output

Welcome to S4avaj

โ€‹ โ€‹โ€‹

You Might Also Like

  ::. About the Author .::

Java4s_Author
- 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.

Comments

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……

Name*
Mail*
Website



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 - 2018 Java4s - Get It Yourself.
The content is copyrighted to Sivateja Kandula and may not be reproduced on other websites.