How Do Angularjs Allows Us To Create Custom Filters

Posted By Puneet Sharma | 30-May-2018

To create a custom filter, you must follow these steps:

  • Pass a custom filter name and function as an input parameter for the app and create a filter using app.filter.
  • Filter ()
  • App.filter () will return a function
  • Retuned function can take various optional input parameters
  • The returned functions will have a custom filter code and will return the output.

Let's start with creating a very simple custom filter. We can apply this custom filter to a string and it will return to the capital case with each character.

               MyApp.filter('toUpperCase', function () {
    			return function (input)
        			var output = "";       
        			output = input.toUpperCase();
        			return output;


We can use the toUpperCase custom filters in the view as shown below:

<div ng-controller="ProductController">
<table class="table">
		<tr ng-repeat="a in products|filter:searchTerm">


We should keep in mind that the name of the custom filter is case sensitive, reading data from the above created view controller as shown below:

MyApp.controller("ProductController", function ($scope) {
    $scope.products = [
        { 'name': 'pen', 'price': '200' },
         { 'name': 'pencil', 'price': '400' },
          { 'name': 'book', 'price': '2400' },
           { 'name': 'ball', 'price': '400' },
            { 'name': 'eraser', 'price': '1200' },


Now we will get the product name given in the case of capital as shown in the image below:

angular filter example result

Request for Proposal

Recaptcha is required.

Sending message..