Introduction

This blog demonstrates 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.
  1. <HTML ng-app = "myapp">
  2. <TITLE> AngularJS: Custom Filter</TITLE>
  3. <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
  4. <script>
  5. var myapp=angular.module("myapp",[]);
  6. myapp.controller("myappcont",function($scope){
  7. $scope.students=[
  8. {Name:"Kailash",Gender:"Male",Class:"1Std",Section:"A"},
  9. {Name:"Kalyan",Gender:"Male",Class:"1Std",Section:"A"},
  10. {Name:"Kalyani",Gender:"Female",Class:"1Std",Section:"A"},
  11. {Name:"Kamal",Gender:"Male",Class:"2Std",Section:"B"},
  12. {Name:"Keshav",Gender:"Male",Class:"2Std",Section:"B"},
  13. {Name:"KedarGouri",Gender:"Female",Class:"2Std",Section:"B"}];
  14. });
  15. myapp.filter('concatenet',function(){
  16. return function(input)
  17. {
  18. return 'Name:'+input.Name+'Gender:'+input.Gender+'Class:'+input.Class+'Section:'+input.Section;
  19. }});
  20. </script>
  21. <BODY ng-controller="myappcont">
  22. <table border="1">
  23. <tr>
  24. <th>Name</th>
  25. <th>Gender</th>
  26. <th>Class</th>
  27. <th>Section</th>
  28. <th>Concatenet Values</th>
  29. </tr>
  30. <tr ng-repeat="student in students | filter:searchText">
  31. <td>{{student.Name}}</td>
  32. <td>{{student.Gender}}</td>
  33. <td>{{student.Class}}</td>
  34. <td>{{student.Section}}</td>
  35. <td>{{student|concatenet}}</td>
  36. </tr>
  37. </table>
  38. </BODY>
  39. </HTML>