Custom Filter of AngularJS


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 declaring controller in AngularJS. The filter factory function of module helps to create custom filter. It takes string value as first parameter for custom filter name and the second parameter is name of a function where filteration 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
Kaialsh Chandra Behera


No comments:

Post a Comment