If so, then you\u2019ve used a filter in an AngularJS application. AngularJS provides us many in-built directives like search. If required, AngularJS also allows us to create custom filters, which we\u2019ll explore in this post.<\/p>\n\n\n\n
AngularJS gives us a simple API to create a custom filter. You\u2019ll remember that we use app.controller() to create controllers and app.module() to create modules. In exactly the same way, AngularJS has given us the angular.filter API to create a custom filter in AngularJS. <\/p>\n\n\n\n
A custom filter can be created using the following syntax:<\/p>\n\n\n\n To create a custom filter, you need to do the following steps:<\/p>\n\n\n\n Let us start with creating a very simple custom filter. We can apply this custom filter on a string and it will return the string with each character in a capital case.<\/p>\n\n\n\n We can use the toUpperCase custom filter in the view as shown the listing below:<\/p>\n\n\n\n We need to keep in mind that the name of the custom filter is case sensitive. The above-created view is reading data from the controller as shown the listing below:<\/p>\n\n\n\n Now we\u2019ll get the product name rendered in a capital case on the view as shown in the image below:<\/p>\n\n\n\n We can use toPositionUpperCase custom filter in the view as shown the listing below. As you will notice that we are passing the input parameter to the custom filter using the colon.<\/p>\n\n\n\n We will get the second letter of product name rendered in the capital case on the view as shown in the image below:<\/p>\n\n\n\n Before we conclude this article, let us create a custom filter which will be applied on the collection of items. Let us say from the list of products, we want to filter all the products greater than a given price. We can write this custom filter as shown in the listing below:<\/p>\n\n\n\n We can use the custom filter on the view as shown in the listing below. We are passing the price parameter from the input type text box.<\/p>\n\n\n\n With this we will get a filtered array on the view as shown in the image below:<\/p>\n\n\n\n So there you have it \u2013 that\u2019s how to create a custom filter! It\u2019s easy \u2013 they\u2019re nothing but functions that take one input and optional parameters to return a function. I hope you enjoyed reading!<\/p>\n\n\n\n Deliver modern, responsive web applications with no limits on browsers, devices, and platforms with Infragistics jQuery& HTML5 controls. Download Free Trial<\/a> now and see their power in action!<\/em><\/p>\n\n\n\n Have you ever used filters with the ng-repeat directive as shown in the listing below? If so, then you\u2019ve used a filter in an AngularJS application. AngularJS provides us many in-built directives like search. If required, AngularJS also allows us to create custom filters, which we\u2019ll explore in this post. AngularJS gives us a simple […]<\/p>\n","protected":false},"author":65,"featured_media":1282,"comment_status":"publish","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,17],"tags":[],"class_list":["post-602","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-how-to"],"_links":{"self":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/comments?post=602"}],"version-history":[{"count":3,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/602\/revisions"}],"predecessor-version":[{"id":2002,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/posts\/602\/revisions\/2002"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media\/1282"}],"wp:attachment":[{"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/media?parent=602"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/categories?post=602"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.infragistics.com\/blogs\/wp-json\/wp\/v2\/tags?post=602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2015\/11\/image.png\" "\\"")
<\/figure>\n\n\n\n\n
MyApp.filter('toUpperCase', function () {\n return function (input)\n {\n var output = \"\"; \n output = input.toUpperCase();\n return output;\n }\n})<\/pre>\n\n\n\n<div ng-controller=\"ProductController\">\n <table class=\"table\"> \n <tr ng-repeat=\"a in products|filter:searchTerm\">\n <td>{{a.name|toUpperCase}}<\/td>\n <td>{{a.price}}<\/td>\n <\/tr>\n <\/table>\n<\/div><\/pre>\n\n\n\nMyApp.controller(\"ProductController\", function ($scope) {\n $scope.products = [\n\t\t{ 'name': 'pen', 'price': '200' },\n\n\t\t{ 'name': 'pencil', 'price': '400' },\n\n\t\t{ 'name': 'book', 'price': '2400' },\n\n\t\t{ 'name': 'ball', 'price': '400' },\n\n\t\t{ 'name': 'eraser', 'price': '1200' },\n ];\n})<\/pre>\n\n\n\n![\"The](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2015\/11\/image-1.png\" "\\"The")
<\/figure>\n\n\n\nMyApp.filter('toPositionUpperCase', function () {\n \n return function (input,position)\n {\n var output = []; \n var capLetter = input.charAt(position).toUpperCase();\n for (var i = 0; i < input.length; i++) {\n \n if (i == position) {\n output.push(capLetter);\n } else {\n output.push(input[i]);\n }\n \n }\n output = output.join('');\n return output;\n }\n})<\/pre>\n\n\n\n<div ng-controller=\"ProductController\">\n <table class=\"table\"> \n <tr ng-repeat=\"a in products|filter:searchTerm\">\n <td>{{a.name|toPositionUpperCase:1}}<\/td>\n <td>{{a.price}}<\/td>\n <\/tr>\n <\/table>\n<\/div><\/pre>\n\n\n\n![\"We](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2015\/11\/image-2.png\" "\\"We")
<\/figure>\n\n\n\nMyApp.filter('priceGreaterThan', function () {\n \n return function (input, price) {\n var output = [];\n if (isNaN(price)) {\n \n output = input;\n }\n else {\n angular.forEach(input, function (item) {\n \n if (item.price > price) {\n output.push(item)\n }\n });\n }\n return output;\n }\n})<\/pre>\n\n\n\n<h1>With Custom Filter<\/h1>\n \n<div ng-controller=\"ProductController\">\n <input type=\"number\" class=\"form-control\" placeholder=\"Search here\" ng-model=\"priceterm\" \/>\n <br\/>\n <table class=\"table\">\n <tr ng-repeat=\"b in products|priceGreaterThan:priceterm\">\n <td>{{b.name}}<\/td>\n <td>{{b.price}}<\/td>\n <\/tr>\n <\/table>\n<\/div><\/pre>\n\n\n\n![\"we](\"https:\/\/staging.infragistics.com\/blogs\/wp-content\/uploads\/2015\/11\/image-3.png\" "\\"we")
<\/figure>\n\n\n\n![\"](\"https:\/\/download.infragistics.com\/marketing\/Blog-in-content-ads\/Ignite-UI-JavaScript\/Blog-incontent-IgniteUI-650x200.jpg\")
<\/a><\/figure>\n","protected":false},"excerpt":{"rendered":"