Jak rozszerzyć lub zastąpić istniejące filtry w angularjs?

Question

Czy można rozszerzyć istniejące filtry "standardowe" (date, number, lowercase itd.)? W moim przypadku muszę przeanalizować datę z formatu RRRRMMDDhmmmm, więc chciałbym przedłużyć (lub przesłonić) filtr date zamiast pisać własny.

Answer 1

Nie jestem pewien, czy dobrze rozumiem twoje pytanie, ale jeśli chciałbyś rozszerzyć funkcjonalność istniejących filtrów, możesz stworzyć nowy filtr, który zdobi istniejący. Przykład:

myApp.filter('customDate', function($filter) { 
    var standardDateFilterFn = $filter('date'); 
    return function(dateToFormat) { 
    return 'prefix ' + standardDateFilterFn(dateToFormat, 'yyyyMMddhhmmss'); 
    }; 
}); 

a następnie w szablonie:

{{now | customDate}} 

Mimo powyższego, jeśli po prostu chcesz sformatować datę stosownie do danego formatu można to zrobić z istniejącym filtrem data :

{{now | date:'yyyyMMddhhmmss'}} 

Oto jsFiddle ilustrujący pracę obu technik: http://jsfiddle.net/pkozlowski_opensource/zVdJd/2/

Należy pamiętać, że jeśli format nie jest określony, AngularJS zakłada, że ​​jest to format "średni" (dokładny format zależy od ustawień regionalnych). Sprawdź numer http://docs.angularjs.org/api/ng.filter:date, aby uzyskać więcej informacji.

Ostatnia uwaga: jestem nieco zdezorientowany, jeśli chodzi o "parsowanie" części pytania. Rzecz w tym, że filtry służą do analizowania obiektu (w tym przypadku daty), a nie wersetu. Jeśli analizowane są ciągi (z danych wejściowych) reprezentujących daty, należy zajrzeć do parserów $ NgModelController # (sprawdź część "Custom Validation" w http://docs.angularjs.org/guide/forms).

Answer 2

wolę wdrożenia decorator pattern, a właściwie w kątowa jest bardzo proste ..
Tak więc, jeśli weźmiemy @ pkozlowski.opensource przykład, można zrobić coś takiego:

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; 
    }]) 
}]) 

a następnie w swoich widokach możesz używać zarówno standardowych, jak i rozszerzonych zachowań.
z tym samym filtrem

<p>Standard output : {{ now | date:'yyyyMMddhhmmss' }}</p> 
<p>External behavior : {{ now | date:'yyyyMMddhhmmss': ' My suffix' }}</p> 

Oto jsFiddle ilustrujący pracę obu technik: http://jsfiddle.net/ar8m/9dg0hLho/