Is it possible to extend existing "standard" filters (date, number, lowercase etc)?
In my case I need to parse date from YYYYMMDDhhmmss format so I'd like to extend (or override) date filter instead of writing my own.
Add a comment
|
2 Answers
I prefer to implement the decorator pattern, which is very easy in AngularJS.
If we take @pkozlowski.opensource example, we can change it to something like:
myApp.config(['$provide', function($provide) {
$provide.decorator('dateFilter', ['$delegate', function($delegate) {
var srcFilter = $delegate;
var extendsFilter = function() {
var res = srcFilter.apply(this, arguments);
return arguments[2] ? res + arguments[2] : res;
}
return extendsFilter;
}])
}])
And then in your views, you can use both.. the standard output and the extended behavior.
with the same filter
<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p>
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p>
Here is a working fiddle illustrating both techniques: http://jsfiddle.net/ar8m/9dg0hLho/
5 Comments
iwalkbarefoot
This is absolutely 100% exactly what I needed. I'd up vote you three times if I could.
hugo der hungrige
This the correct answer. But remember that you have to append
Filter for filters to get them. Recreating a filter with the same name is also fine by me, as they're usually (always?) a single function, you're going to change any way.
Jossef Harush Kadouri
Great approach. q: first param of
srcFilter.apply(...) is this, however i saw other examples that the first param is null. what's it's purpose?
JesseDahl
@JossefHarush "The apply() method calls a function with a given this value, and arguments provided as an array (or an array-like object)." developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… for reasoning, some good answers here stackoverflow.com/questions/33640079/…
dmbaughman
YES. I used this to provide an alternate formatting for Korean currency (I guess the format used by AngularJS using angular-locale is wrong) and then fall back to the original filter for other cultures.
I'm not sure if I understand your question correctly, but if you would like to extend functionality of existing filters you could create a new filter that decorates an existing one. Example:
myApp.filter('customDate', function($filter) {
var standardDateFilterFn = $filter('date');
return function(dateToFormat) {
return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
};
});
and then, in your template:
{{now | customDate}}
Having said the above, if you simply want to format a date according to a given format this can be done with the existing date filter:
{{now | date:'yyyyMMddhhmmss'}}
Here is the working jsFiddle illustrating both techniques: http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/
Please note that if a format is not specified AngularJS will assume that this is 'medium' format (the exact format depends on a locale). Check http://docs.angularjs.org/api/ng.filter:date for more.
The last remark: I'm a bit confused about the 'parse from' part of your question. The thing is that filters are used to parse an object (date in this case) to string and not vice verse. If you are after parsing strings (from an input) representing dates you would have to look into NgModelController#$parsers (check the "Custom Validation" part in http://docs.angularjs.org/guide/forms).
answered Sep 2, 2012 at 15:31
pkozlowski.opensource
117k60 gold badges329 silver badges286 bronze badges
1 Comment
coxx
According to documentation date filter can accept dates as ISO 8601 formated strings. In my case input format is 'yyyyMMddHHmmss' so standard filter
date can't parse it.