Passing Configuration Params to Filters

Problem

You wish to make your filter customizable by introducing config params.

Solution

Angular filters can be passed a hash of params which can be directly accessed in the filter function.

<body ng-app="MyApp">
  <input type="text" ng-model="text" placeholder="Enter text"/>
  <p>Input: {{ text }}</p>
  <p>Filtered input: {{ text | reverse: { suffix: "!"} }}</p>
</body>
var app = angular.module("MyApp", []);

app.filter("reverse", function() {
  return function(input, options) {
    input = input || "";
    var result = "";
    var suffix = options["suffix"] || "";

    for (var i=0; i<input.length; i++) {
      result = input.charAt(i) + result;
    }

    if (input.length > 0) result += suffix;

    return result;
  };
});

You can find the complete example on github.

Discussion

The suffix ! is passed as an option to the filter function and is appended to the output. Note that we check if an actual input exists since we don’t want to render the suffix without any input.