Create custom filter in Angular JS

In Angular JS,

Filter is a nice way to format the data displayed.

Filter can be used in view templates, controllers or services and  we can define our own filter.

Angular Js filters transforms the data as it passes from the scope to the directive but it does not change the actual data, and it  allow you to format or transform data for display in views.

 

A filter can be added to an expression using a pipe character (|) .

 

Syntax

In HTML Template Binding

{{ filter_expression | filter : expression : comparator}}

 

In JavaScript Controller

$filter(‘filter’)(array, expression, comparator)

 

There are several built-in filter in angular js.

 

uppercase or lowercase – Change the case of a string

currency – Format a currency value

number – Format a general numeric value

date – Format the date

limitTo – Select/Display a limited number of  information from a data set.

orderBy – Sort the objects in an array

 

Examples:

Here i will capitalize all characters of string:

{{ ‘My name is Nitish Kumar’ | uppercase }}
// result: MY NAME IS NITISH KUMAR

 

A filter also takes arguments. We can pass it like this way:

{{ 123.4567 | number:1 }}
//result: 123.4

 

We can use filters in the Angular JS controller, For this we need to use $filter service:

app.controller('YourController', ['$scope', '$filter',
  function($scope, $filter) {
      $scope.myName = $filter('uppercase')('My name is Nitish Kumar');
     // result: 'MY NAME IS NITISH KUMAR'
}]);

 

How to create a custom filter

To create a custom filter we have to just register a new filter factory function with our module.

This factory function should return a new filter function which takes the input value as the first argument. Any filter arguments are passed in as additional arguments to the filter function.

angular.module('myApp')
 .filter('myslug', function () {
     return function (inputValue) {
       if (inputValue) {
           return inputValue.toLowerCase().replace(/[^a-z_]/g, '-');
       }
     };
  });

In this example we convert the string into lower case and replacing any spaces with dash.

{{ ‘this is my slug’ | myslug }}
//result: this-is-my-slug

 

Angular Docs For Filters:

https://docs.angularjs.org/api/ng/filter/filter

https://docs.angularjs.org/guide/filter

https://docs.angularjs.org/api/ng/filter

 

 

 

253 thoughts on “Create custom filter in Angular JS

  1. Nice post. I was checking constantly this blog and I am impressed!
    Extremely helpful info specially the last part :) I care for such information much.
    I was looking for this certain info for a long time. Thank you and good luck.

  2. Thanks for sharing your info. I truly appreciate your efforts and I will be waiting for your further post thank you once again

  3. Pingback: Google
  4. Pingback: click to read
  5. Pingback: this content
  6. Pingback: le watch case 42mm
  7. Pingback: Continued
  8. Pingback: targeting traffic
  9. Pingback: shemale
  10. Pingback: Energy grants
  11. Pingback: comic
  12. Pingback: Sofa
  13. Pingback: Netflix Nederland
  14. Pingback: custom shelving
  15. Pingback: Daily Tech Blog
  16. Pingback: undelete
  17. Pingback: Bondage Restraints
  18. Pingback: tablet android 8
  19. Pingback: miniclip
  20. Pingback: mixed
  21. Pingback: best health care
  22. Pingback: Rebtel Signup
  23. Pingback: dentist nogales
  24. Pingback: gotvene
  25. Pingback: mind manifesting
  26. Pingback: anzac day tours
  27. Pingback: at home std test
  28. Pingback: anzac day tours
  29. Pingback: albergo vicenza
  30. Pingback: Oak furniture
  31. Pingback: 411 PAIN pills
  32. Pingback: Dolphinaris
  33. Pingback: low rate call
  34. Pingback: Buy My Book
  35. Pingback: view
  36. Pingback: gsn free slots
  37. Pingback: Learn More
  38. Pingback: ASTM D 96 tubes
  39. Pingback: indian hair
  40. Pingback: pdr training
  41. Pingback: butt plug tail
  42. Pingback: Superb Digital
  43. Pingback: New York
  44. Pingback: buy backlinks
  45. Pingback: Cheap Ray Ban
  46. Pingback: graphic novel
  47. Pingback: magic wand reviews
  48. Pingback: My Homepage
  49. Pingback: real estate agent
  50. Pingback: Prime Pulls
  51. Pingback: dent repair school
  52. Pingback: Jeremy Neo
  53. Pingback: find more info
  54. Pingback: 411 PAIN
  55. Pingback: used dildo
  56. Pingback: Whisky
  57. Pingback: Work From Home
  58. Pingback: FZWX007
  59. Pingback: SEO
  60. Pingback: Diamond Darling
  61. Pingback: this contact form
  62. Pingback: drivers dwonload
  63. Pingback: Nouveau Finance
  64. Pingback: Nouveau Finance
  65. Pingback: Nouveau Finance
  66. Pingback: Clitoral Vibrators
  67. Pingback: hotel furniture
  68. Pingback: Suzuki
  69. Pingback: Data Centers
  70. Pingback: Office Space
  71. Pingback: Sintra printing
  72. Pingback: xadat
  73. Pingback: Jeremy Neo
  74. Pingback: Thomas Caufmann
  75. Pingback: Google
  76. Pingback: galeria sztuki
  77. Pingback: truck decals
  78. Pingback: WiYnE
  79. Pingback: Free Classified
  80. Pingback: restaurant verona
  81. Pingback: kayket
  82. Pingback: flavored coffee
  83. Pingback: Shanghai flats
  84. Pingback: classic coffee
  85. Pingback: flavored coffee
  86. Pingback: spring coffee
  87. Pingback: spring coffee
  88. Pingback: coffee vs
  89. Pingback: shop coffee
  90. Pingback: coffee and
  91. Pingback: mountain coffee
  92. Pingback: best coffee
  93. Pingback: classic coffee
  94. Pingback: Related Site
  95. Pingback: coffee classics
  96. Pingback: dropshipper
  97. Pingback: coffee classics
  98. Pingback: flavored coffee
  99. Pingback: telefon sohbet
  100. Pingback: telefon sohbet
  101. Pingback: how computers work
  102. Pingback: find this
  103. Pingback: Air condition
  104. Pingback: Revshare earning
  105. Pingback: Jack Daniels
  106. Pingback: Συναυλίες
  107. Pingback: Generic Viagra
  108. Pingback: Generic Viagra
  109. Pingback: Directory links
  110. Pingback: Stegplatten
  111. Pingback: dental office
  112. Pingback: Mobility
  113. Pingback: find here
  114. Pingback: directory
  115. Pingback: pdr training
  116. Pingback: ica hotels
  117. Pingback: pdr school
  118. Pingback: pdr training
  119. Pingback: puffy pussies
  120. Pingback: pdr course
  121. Pingback: pdr classes
  122. Pingback: eLiquid
  123. Pingback: recipes
  124. Pingback: obat klg
  125. Pingback: selling
  126. Pingback: cpsm study guide
  127. Pingback: Clothes online
  128. Pingback: Maria Johnsen
  129. Pingback: gourmet coffee
  130. Pingback: Maria Johnsen
  131. Pingback: SAI PDR Training
  132. Pingback: tannlege oslo
  133. Pingback: tannlege
  134. Pingback: coffee shops near
  135. Pingback: markedsføring
  136. Pingback: best dark coffee
  137. Pingback: best french coffee
  138. Pingback: Jewelry online
  139. Pingback: sportwetten online
  140. Pingback: sohbet hatti
  141. Pingback: work from home
  142. Pingback: fail
  143. Pingback: sohbet hatti
  144. Pingback: lioncoffee
  145. Pingback: comment

Comments are closed.