How to create custom filters ?

CUSTOM FILTER

• Custom filter is a function that returns a function (which may return another value on the basis of current value)

• Call the filter with | :  | <Custom Filter>
  Filter will take current item in iteration as a parameter.
  You can pass and use the same parameter in inner function (Like, post in below example)

JS
var app = angular.module('module1', []);

app.filter("postFilter", function () {
    return function (post) {
        switch (post) {
           case 1:  return "SE";
           case 2:  return "TL";
           case 3:  return "PM";
        }
    }
});
 
app.controller("myController", function ($scope) {
    var employees = [
        { name : "Shaan", post : 3, salary : 25000 },
        { name : "Renu",  post : 1, salary : 47000 },
        { name : "Rahul", post : 2, salary : 35000 },
        { name : "Anju",  post : 1, salary : 18000 }
     ]
 
   $scope.employees = employees;
});


HTML
<div ng-controller="myController"> 
  <table>
     <thead>
        <tr> <th>Name</th> <th>Post</th> <th>Salary</th> </tr>
     </thead>
     <tbody>
        <tr ng-repeat="employee in employees">
           <td> {{ employee.name }} </td>
           <td> {{ employee.post | postFilter }} </td>
           <td> {{ employee.salary }} </td>
        </tr>
     </tbody>
  </table> 
</div>


OUTPUT Name   | Post   | Salary
Shaan  | PM     | 25000
Renu   | SE     | 47000
Rahul  | TL     | 35000
Anju   | SE     | 18000


You can define custom filter in separate JS file and include it your HTML file.