Подтвердить что ты не робот

Как расширить или переопределить существующие фильтры в angularjs?

Можно ли расширить существующие "стандартные" фильтры (date, number, lowercase и т.д.)? В моем случае мне нужно проанализировать дату из YYYYMMDDhhmmss, поэтому я хотел бы расширить (или переопределить) date фильтр вместо того, чтобы писать свои собственные.

4b9b3361

Ответ 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/