# Developer Guide: Templates: Filters: Creating Angular Filters

Writing your own filter is very easy: just define a JavaScript function on the `angular.module.ng.$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:

- `this` — The current scope.
- `this.$element` — The DOM element containing the binding. The `$element` variable allows the filter to manipulate the DOM.

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.module('MyReverseModule', []).
        filter('reverse', function() {
          return function(input, uppercase) {
            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();
            }
            return out;
          }
        });

      function Ctrl($scope) {
        $scope.greeting = 'hello';
      }
    </script>

    <div ng-controller="Ctrl">
      <input ng-model="greeting" type="greeting"><br>
      No filter: {{greeting}}<br>
      Reverse: {{greeting|reverse}}<br>
      Reverse + uppercase: {{greeting|reverse:true}}<br>
    </div>

      it('should reverse greeting', function() {
        expect(binding('greeting|reverse')).toEqual('olleh');
        input('greeting').enter('ABC');
        expect(binding('greeting|reverse')).toEqual('CBA');
      });

### Related Topics

- Understanding Angular Filters
- Angular HTML Compiler

### Related API

- `Angular Filter API`