Creating Custom Filters in AngularJS
Key Concepts
Custom Filters in AngularJS allow you to create reusable functions that can be applied to data in your views. These filters can transform data before it is displayed, making your application more dynamic and user-friendly. Custom Filters are particularly useful for formatting data, such as dates, currencies, or custom text transformations.
1. Defining a Custom Filter
To create a custom filter, you use the filter method on your AngularJS module. The filter method takes two arguments: the name of the filter and a factory function that returns the filter function. The filter function itself takes the input data and returns the transformed data.
Example:
app.filter('reverse', function() {
return function(input) {
return input.split('').reverse().join('');
};
});
In this example, the reverse filter takes a string as input and returns the string reversed.
2. Using a Custom Filter in a View
Once a custom filter is defined, you can use it in your views by applying it to an expression using the pipe (|) symbol. The filter will be applied to the result of the expression.
Example:
<p>{{ 'Hello World' | reverse }}</p>
In this example, the reverse filter is applied to the string 'Hello World', resulting in 'dlroW olleH' being displayed.
3. Passing Arguments to Custom Filters
Custom filters can accept additional arguments by defining parameters in the filter function. These parameters can be used to customize the filter's behavior.
Example:
app.filter('prefix', function() {
return function(input, prefix) {
return prefix + input;
};
});
In this example, the prefix filter takes an additional argument prefix and prepends it to the input string.
Usage:
<p>{{ 'World' | prefix:'Hello ' }}</p>
This will display 'Hello World'.
4. Chaining Filters
You can chain multiple filters together by using multiple pipe symbols in your expressions. Each filter will be applied in sequence, with the output of one filter serving as the input to the next.
Example:
<p>{{ 'Hello World' | reverse | uppercase }}</p>
In this example, the reverse filter is applied first, followed by the built-in uppercase filter, resulting in 'DLROW OLLEH' being displayed.
5. Using Filters in Controllers
Filters can also be used in controllers by injecting the filter service and calling the filter function directly. This is useful when you need to apply a filter to data before it is passed to the view.
Example:
app.controller('MainController', function($scope, reverseFilter) {
$scope.reversedText = reverseFilter('Hello World');
});
In this example, the reverseFilter service is injected into the controller and used to reverse the string 'Hello World'.
6. Creating Complex Filters
Custom filters can be as complex as needed, allowing you to perform advanced data transformations. For example, you can create a filter that formats dates, calculates sums, or applies custom logic to your data.
Example:
app.filter('formatDate', function() {
return function(input) {
var date = new Date(input);
return date.toLocaleDateString();
};
});
In this example, the formatDate filter converts a timestamp into a localized date string.
7. Testing Custom Filters
It is important to test your custom filters to ensure they work as expected. You can write unit tests for your filters using AngularJS's testing framework.
Example:
describe('reverse filter', function() {
var reverseFilter;
beforeEach(module('myApp'));
beforeEach(inject(function($filter) {
reverseFilter = $filter('reverse');
}));
it('should reverse the input string', function() {
expect(reverseFilter('Hello')).toBe('olleH');
});
});
In this example, a unit test is written to verify that the reverse filter correctly reverses the input string.