AngularJS Custom Filter

Kailash Chandra Behera | Monday, February 20, 2017

Introduction

In my previous article we had discussed and demonstrated the standard filter of AngularJS. Here in this article we will demonstrate how to create custom filter in AngularJS.

Getting Started

Creating AngularJS custom filter as is as a declaring controller in AngularJS. The filter factory function of the module helps to create a custom filter. It takes a string value as the first parameter for the custom filter name and the second parameter is the name of a function where filtration logic will be applied.

Filter names must be valid AngularJS Expressions identifiers, such as uppercase or orderBy. Names with special characters, such as hyphens and dots, are not allowed. If you wish to namespace your filters, then you can use capitalization 'myappSubsectionFilterx' or underscores 'myapp_subsection_filterx'.

The filter function should be a pure function, which means that it should always return the same result given the same input arguments and should not affect external state, the syntax of filter is same as controller, see the below syntax for custom filter.

Example:-

This code example contains demonstration of creating custom filter in AngularJS. It creates a concatenate filter which concatenates all the properties of students and displays list of student in a table. This example displays all the properties values of student in multiple column along with concatenate values. Fore more details see the below example.
 <HTML ng-app = "myapp">   
    <TITLE> AngularJS: Custom Filter</TITLE>   
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>   
    <script>   
       var myapp=angular.module("myapp",[]);   
       myapp.controller("myappcont",function($scope){   
       $scope.students=[   
       {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},   
       {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},   
       {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},   
       {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},   
       {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},   
       {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];   
       });   
 myapp.filter('concatenet',function(){  
 return function(input)  
 {  
 return 'Name:'+input.Name+'Gender:'+input.Gender+'Class:'+input.Class+'Section:'+input.Section;  
 }});              
    </script>   
    <BODY ng-controller="myappcont">   
       <table border="1">   
         <tr>   
            <th>Name</th>   
            <th>Gender</th>   
            <th>Class</th>   
            <th>Section</th>   
                          <th>Concatenet Values</th>                            
         </tr>   
         <tr ng-repeat="student in students | filter:searchText">   
            <td>{{student.Name}}</td>   
            <td>{{student.Gender}}</td>   
            <td>{{student.Class}}</td>   
            <td>{{student.Section}}</td>   
                          <td>{{student|concatenet}}</td>                            
         </tr>   
       </table>   
    </BODY>   
  </HTML>

Summary

This article demonstrated how to create custom filter using filter factory method in AngularJS. Hope this article may be helpful to you, happy coding and enjoy.......

Thanks

By at