Можно ли расширить существующие "стандартные" фильтры (date
, number
, lowercase
и т.д.)?
В моем случае мне нужно проанализировать дату из YYYYMMDDhhmmss, поэтому я хотел бы расширить (или переопределить) date
фильтр вместо того, чтобы писать свои собственные.
Как расширить или переопределить существующие фильтры в angularjs?
Ответ 1
Я не уверен, правильно ли я понял ваш вопрос, но если вы хотите расширить функциональность существующих фильтров, вы можете создать новый фильтр, который украсит существующий. Пример:
myApp.filter('customDate', function($filter) {
var standardDateFilterFn = $filter('date');
return function(dateToFormat) {
return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss');
};
});
а затем в вашем шаблоне:
{{now | customDate}}
Сказанное выше, если вы просто хотите отформатировать дату в соответствии с заданным форматом, это можно сделать с помощью существующего фильтра даты:
{{now | date:'yyyyMMddhhmmss'}}
Вот рабочий jsFiddle, иллюстрирующий оба метода: http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/
Обратите внимание, что если формат не указан, AngularJS будет считать, что это "средний" формат (точный формат зависит от локали). Подробнее см. http://docs.angularjs.org/api/ng.filter:date.
Последнее замечание: я немного запутался в части вашего "вопроса". Дело в том, что фильтры используются для синтаксического анализа объекта (дата в этом случае) для строки, а не наоборот. Если после синтаксического анализа строк (из ввода), представляющих даты, вам нужно будет изучить парсер NgModelController # $(проверьте часть "Пользовательская проверка" в http://docs.angularjs.org/guide/forms).
Ответ 2
Я предпочитаю использовать шаблон декоратора, и фактически в angular очень просто..
Итак, если мы возьмем пример @pkozlowski.opensource, вы можете сделать что-то вроде этого:
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;
}])
}])
И затем в ваших представлениях вы можете использовать как.. стандартный вывод, так и расширенное поведение.
с тем же фильтром
<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p>
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p>
Вот рабочий jsFiddle, иллюстрирующий оба метода: http://jsfiddle.net/ar8m/9dg0hLho/