< Previous chapterNext chapter >
Last updated .
The term filter is used in Angular to denote an object that can transform some data. Angular comes with a bunch of ready-to-use filters and you can create your own (or fetch a 3rd party ones from somewhere). One of the built-in filters confusingly is called filter, which proves to me that the term filter for the general concept is a misnomer. I would have called it transformer or something like that.
To use a filter in markup there is a general syntax to adhere to. The use of a filter is recognized by the use of the pipe "|" character, followed by the name of the filter. A filter always takes at least one value, which is the value to transform. That first parameter must be given before the pipe. An example of a using a fictitious "fictionary" filter:
<div>{{ 12345 | fictionary }}</div>
Additional arguments (if any) to the filter is then given after the filter name, separated by ":", like this:
<div>{{ 12345 | fictionary:hello:world }}</div>
Filters can be "piped" together, like this:
<div>{{ 12345 | fictionary:hello:world | fictionary2 }}</div>
In the above example, the value will be transformed by the fictionary filter and the result of that will then be transformed by the fictionary2 filter.
Angular comes with a handful of built-in filters and we have already used the filter, orderby, number and date filters in chapter 4 and the json filter in chapter 6. Next, I want to show how to make a custom filter. I thought of a suitable transformer to implement, and what better than to try and mimic some .Net formatting? In .Net, an integer can beformatted with a "D" format string, meaning that it will be converted to a string with a number of leading zeros; for example, the number 34 would be formatted as "0034" using the format string "D4". So here is my attempt at that:
(
function ()
{
var app = angular.module('app', []);
function Dformatter(value, precision)
{
var number = parseInt(value);
if (isNaN(number))
return "";
precision = parseInt(precision);
if (isNaN(precision))
return number.toString();
var pad = "";
for (var i = 0; i < precision; i++)
pad += "0";
var abs = Math.abs(number);
var strNumber = "" + abs;
var s = (pad + strNumber).slice(-Math.max(pad.length, strNumber.length));
if (number === abs)
return s;
return "-" + s;
}
app.filter("D", [
function ()
{
return Dformatter;
}
]);
function MyController()
{
var vm = this;
vm.SomeValue = 23.8;
}
app.controller("myController", [MyController]);
}
)();
And some markup to show the result (partial):
<div ng-app="app" ng-controller="myController as vm">
<div>Expect 12345: {{ 12345 | D:4 }}</div>
<div>Expect 0045: {{ 45 | D:4 }}</div>
<div>Expect -0045: {{ -45 | D:4 }}</div>
<div>Expect 0023: {{ vm.SomeValue | D:4 }}</div>
</div>
It doesn't work exactly like the "D" format string in .Net, but it's close enough. I am sure you can come up with ways of improving the filter.
As the example shows, a filter is defined by calling the filter function with the name of the filter and a function that returns the filter function.
module.filter: Registers a filter with the module. The first argument is the name of the filter, the second argument is a function (factory) returning the filter function. A filter function takes at least one argument.
Filters are most commonly used in Angular expressions in markup. But nothing prevents you from using filters in code. Just inject the required type of filter provider. For example, to make use of the built-in date filter in a controller:
(
function ()
{
var app = angular.module('app', []);
function MyController(dateFilter)
{
var vm = this;
vm.Date = new Date(1972, 9, 22);
vm.FormattedDate = dateFilter(vm.Date, "fullDate");
}
app.controller("myController", ["dateFilter", MyController]);
}
)();
< Previous chapterNext : Using and creating directives >
2016 by Niels Hede Pedersen
