Developer Guide: Templates: Filters: Creating Angular Filters

Work in Progress This page is currently being revised. It might be incomplete or contain inaccuracies.

Writing your own filter is very easy: just define a JavaScript function on the angular.filter object. The framework passes in the input value as the first argument to your function. Any filter arguments are passed in as additional function arguments.

You can use these variables in the function:

The following sample filter reverses a text string. In addition, it conditionally makes the text upper-case and assigns color.

<script type="text/javascript">
 angular.filter('reverse', function(input, uppercase, color) {
   var out = "";
   for (var i = 0; i < input.length; i++) {
     out = input.charAt(i) + out;
   }
   // conditional based on optional argument
   if (uppercase) {
     out = out.toUpperCase();
   }
   // DOM manipulation using $element
   if (color) {
     this.$element.css('color', color);
   }
   return out;
 });
</script>


<input name="text" type="text" value="hello" /><br>
No filter: {{text}}<br>
Reverse: {{text|reverse}}<br>
Reverse + uppercase: {{text|reverse:true}}<br>
Reverse + uppercase + blue:  {{text|reverse:true:"blue"}}
it('should reverse text', function(){
expect(binding('text|reverse')).toEqual('olleh');
input('text').enter('ABC');
expect(binding('text|reverse')).toEqual('CBA');
});

Related Topics

Related API