Saturday , April 29 2017
Home / angularjs / Angularjs Custom Filter Example

Angularjs Custom Filter Example

AngularJs framework comes with a bunch of pre-defined filters to filter the application data as per our requirement. We have discussed all predefined filter in our early tutorials. Now it is the time to learn what is AngularJs Custom filter and how we can implement ?

What is Angularjs Custom Filter ?

Though we have a bunch of predefined filters in AngularJs, those may not be fulfill your application requirements, since all filters are comes with a specific requirement.

AngularJs given us to implement our own filters according to our business requirement.

Filters that we develop as per our customized requirements are called Custom Filters.

Example :

  • Display names starts with a specific character.
  • Filter only even numbers.
  • Filter only five multiples and etc..

How to create AngularJs Custom Filter :

We can create custom filter with angularJs module object reference.

AngularJs module object provides a method called filter() to create custom filter.

myApp.filter(“filterName”,function(){

// Required code..

})

AngularJs Custom Filter Example :

In the below example we are going to create custom filter for reverse of a string and string starts with a specific character.


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs Custom Filter Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
    var myApp = angular.module("myApp",[]);
    
    myApp.controller("myController",function($scope){
        $scope.userName="Chandra Shekhar";
        $scope.courses = ["AngularJs","Java","Spring","Hibernate","Jquery","PHP","HTML"];
    })
    // creating custome filter to reverse of the string
    
    myApp.filter("reverse",function(){
        var fn_test = function(input){
            var ar = input.split('');
            ar.reverse();
            var output = ar.join('');
            return output;
        }
        return fn_test;
    });
    
    myApp.filter("startsWith",function(){
        var starts = function(input,option){
            var output=[];
            for(var i=0;i<input.length;i++){
                if(input[i].charAt(0) == option){
                    output.push(input[i]);
                }
            }
            return output;
        }
        return starts;
    })
    
    
    </script>
</head>
<body ng-app="myApp">
    <h1>AngularJs Custom Filter Example</h1>
    <div ng-controller="myController">
        User Name : {{userName | reverse}} <br>
        <br> <span> Filter Courses</span>
        <ol>
            <li ng-repeat="item in courses | startsWith:'J'">{{item}}</li>
        </ol>
    </div>
</body>
</html>

Output :

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *