Custom Filter

Angular has a .filter() method for each Module, which means we can write our own custom filters.
The returned function gets invoked each time Angular calls the filter, which means two-way binding for our filters. The user makes a change, the filter runs again and updates as necessary. The name of our filter is how we can reference it inside Angular bindings.
This article represents high-level concepts and code sample/example of how to create a custom filter. How to Create A Custom Filter and in this example, we are using a custom filter to reverse the string and convert the reverse string in lower case. 

To create a new filter, the filter needs to be registered as a new factory function with your module. In the example below, “reverse” filter is registered with “myApp” module using the “filter” factory function.

Example 1: Here we are creating a custom filter to reverse the string and convert the reverse string in lower case. 

<html ng-app="myApp">
<html>
<script src="js/angular.min.js"></script>
<body>
  <h3>Custom filter to reverse a string</h3>
  <input type="text" ng-model="str"><br/>
  Orginal input type string : {{ str }} <br/>

  Reverse of string in lower case : {{ str | reverse : 'lowercase' }}
  <script>
  var app = angular.module("myApp", [])
  .filter("reverse", function () {
    return function(text, option) {
      text = text || '';
      var reverseStr = '';
      for(var i = text.length -1; i >= 0; i--){
        reverseStr += text[i];
      }
      if(option){
        if(option.toUpperCase() == 'UPPERCASE'){
          return reverseStr.toUpperCase();
        } else if (option.toUpperCase() == 'LOWERCASE'){
          return reverseStr.toLowerCase();
        }
      }
    //  return reverseStr;
    };
  })
</script>
</body>
</html>

Example 2:  Filter for ng-repeat, in example 2 we will create a custom filter to display all the name of all friends starts with A. 

<html ng-app="myApp">
<html>
<script src="js/angular.min.js"></script>
<body>
  <div>
      <div ng-controller="PersonCtrl as person">
          <ol>
              <li ng-repeat="friend in person.friends | startsWithA">
                  {{ friend }}
              </li>
          </ol>
      </div>
  </div>
<script>
var app = angular.module('myApp', []);

app.filter('startsWithA', function () {
    return function (items) {
        var filtered = [];
        for (var i = 0; i < items.length; i++) {
            var item = items[i];
            if (/a/i.test(item.name.substring(0, 1))) {
                filtered.push(item);
            }
        }
        return filtered;
    };
});

app.controller('PersonCtrl', function () {
    this.friends = [{
        name: 'Alex'
    }, {
        name: 'Smith'
    }, {
        name: 'Arjun'
    }, {
        name: 'Arien'
    }, {
        name: 'Jim'
    }];
});

</script>
</body>
</html>