Filtry AngularJS i filtr niestandardowy AngularJS z przykładem
Jamesa Hartmana
⚡ Inteligentne podsumowanie
Filtr w AngularJS formatuje wartość wyrażenia do wyświetlenia bez zmiany danych bazowych. Wbudowane filtry obejmują wielkość liter, liczby, waluty i JSON, natomiast filtr niestandardowy obsługuje wszelkie reguły formatowania, których framework nie oferuje.
Co to jest filtr w AngularJS?
A Filtruj w AngularJS Pomaga sformatować wartość wyrażenia do wyświetlenia użytkownikowi bez zmiany wartości oryginalnej. Na przykład, jeśli chcesz, aby ciąg znaków był wyświetlany małymi lub wielkimi literami, możesz to zrobić za pomocą filtrów. Wbudowane filtry, takie jak „małe litery” i „wielkie litery”, zwracają ciąg znaków w żądanej wielkości liter. Dostępne są również filtry dla liczb, walut i JSON.
⚠️ Uwaga dotycząca wersji: AngularJS (gałąź 1.x) zakończył wsparcie techniczne 31 grudnia 2021 roku i nie otrzymuje już żadnych poprawek bezpieczeństwa. Wszystkie poniższe informacje pozostają aktualne i dotyczą utrzymania istniejących aplikacji AngularJS; w nowoczesnym Angularze tę samą rolę pełni potok.
Filtry stosuje się w widoku za pomocą znaku potoku. Zanim przyjrzysz się każdemu z nich, warto wiedzieć, dlaczego warto napisać własny.
Filtr małych liter w AngularJS
Ten filtr przyjmuje ciąg znaków i wyświetla wszystkie jego znaki małymi literami.
Poniżej kontroler wysyła ciąg znaków do widoku za pośrednictwem obiektu zakresu, a filtr konwertuje go na małe litery.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> </head> <body> <h1> Guru99 Global Event</h1> <script src="https://code.angularjs.org/1.6.9/angular.min.js"></script> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | lowercase}} </div> <script> var app = angular.module('DemoApp', []); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script> </body> </html>
Code Wyjaśnienie
- Ciąg znaków o mieszanej wielkości liter „Angular JS” jest umieszczany w zmiennej członkowskiej o nazwie
tutorialNamena obiekcie zakresu. - Symbol filtru (|) oznacza wynik do transformacji, a
lowercaseSłowo kluczowe stosuje wbudowany filtr, który zamienia cały ciąg na małe litery.
⚠️ Zmiany wprowadzono do każdego wpisu. Wszystkie sześć oryginalnych egzemplarzy miało trzy wady. chrset="UTF 8" nie jest prawidłowym atrybutem ani kodowaniem i jest teraz charset="UTF-8". angular-route.js załadowany zanim angular.min.js, który generuje błąd modułu i nigdy nie był używany — został usunięty, podobnie jak nieużywana referencja do jQuery. W tekście podano również, że wartością była „AngularJS”, podczas gdy kod ustawiał „Angular JS”; tekst teraz jest zgodny.
Wyjście:
Ciąg znaków o różnych wielkościach liter jest w całości generowany małymi literami. Transformacja w drugą stronę działa w ten sam sposób.
Filtr wielkich liter w AngularJS
Filtr ten jest odpowiednikiem filtra małych liter i wyświetla wszystkie znaki jako wielkie litery.
Poniżej kontroler wysyła ciąg znaków do widoku za pośrednictwem obiektu zakresu, a filtr konwertuje go na wielkie litery.
<!-- The head and library references are unchanged from the previous example --> <div ng-app="DemoApp" ng-controller="DemoController"> Tutorial Name : <input type="text" ng-model="tutorialName"><br> This tutorial is {{tutorialName | uppercase}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialName = "Angular JS"; }]); </script>
Code Wyjaśnienie
- W tekście umieszczono ciąg znaków o mieszanej wielkości liter „Angular JS”
tutorialNamei dołączone do obiektu zakresu. - Po symbolu filtra (|) następuje
uppercasesłowo kluczowe, więc wbudowany filtr wyświetla cały ciąg wielkimi literami.
⚠️ korekta: Oryginał przedstawiał tę sekcję jako „przykład filtra kapitalizującego w AngularJS z opcją małych liter”, co jest dwukrotnie błędne. Ta sekcja demonstruje filtr kapitalizujący, a AngularJS w ogóle nie posiada filtra kapitalizującego — kapitalizacja tylko pierwszej litery wymaga użycia niestandardowego filtra, którego utworzenie zostanie pokazane w kolejnych sekcjach.
Wyjście:
Filtry typu case nie przyjmują argumentów. Następny filtr pokazuje, jak dwukropek przekazuje parametr do filtra.
Filtr liczbowy w AngularJS
Ten filtr formatuje liczbę i może ograniczyć liczbę wyświetlanych miejsc dziesiętnych.
Poniższy przykład wykorzystuje filtr liczbowy do wyświetlania wartości ograniczonej do dwóch miejsc po przecinku. Kontroler wysyła liczbę do widoku za pośrednictwem obiektu zakresu, a filtr jest stosowany w widoku.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorialID is {{tutorialID | number:2}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialID = 3.565656; }]); </script>
Code Wyjaśnienie
- Liczba z wieloma miejscami dziesiętnymi jest umieszczana w zmiennej członkowskiej o nazwie
tutorialIDi dołączone do obiektu zakresu. - Po symbolu filtra (|) następuje
number:2Dwukropek przekazuje argument, a 2 ustawia dwa miejsca po przecinku. Wartość jest zaokrąglana do wyświetlenia, więc 3.565656 wyświetla się jako 3.57, podczas gdy zakres zachowuje pełną liczbę.
Wyjście:
Sformatowanie zwykłej liczby często nie wystarcza, gdy wartość reprezentuje pieniądze. A tym zajmuje się kolejny filtr.
Filtr walutowy w AngularJS
Ten filtr formatuje liczbę jako wartość walutową, poprzedzając ją symbolem waluty, np. $.
W poniższym przykładzie kontroler wysyła liczbę do widoku za pośrednictwem obiektu zakresu, a filtr waluty jest stosowany w widoku.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial Price is {{tutorialprice | currency}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorialprice = 20.56; }]); </script>
Code Wyjaśnienie
- Liczba jest umieszczana w zmiennej członkowskiej o nazwie
tutorialpricei dołączone do obiektu zakresu. - Po symbolu filtra (|) następuje
currencyfiltr.
⚠️ korekta: W oryginale stwierdzono, że waluta „zależy od ustawień językowych komputera”. Tak nie jest. AngularJS używa ustawień regionalnych dołączonych do biblioteki, domyślnie en-US, więc symbolem jest $, niezależnie od systemu operacyjnego. Załaduj pasujący kod. angular-locale_*.js plik lub przekaż symbol bezpośrednio: {{tutorialprice | currency:"£"}}.
Wyjście:
Ciągi znaków i liczby to proste wartości. Ostatni wbudowany filtr działa na całych obiektach.
Filtr JSON w AngularJS
Ten filtr konwertuje obiekt do formatowanego JSON ciÄ…g znakĂłw, ktĂłry jest przydatny do sprawdzania zakresu danych podczas rozwoju.
W poniższym przykładzie kontroler wysyła obiekt do widoku za pośrednictwem obiektu zakresu, a filtr JSON jest stosowany w widoku.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | json}} </div> <script> app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" }; }]); </script>
Code Wyjaśnienie
- Obiekt trzymajÄ…cy
TutorialID: 12oraztutorialName: "Angular"jest umieszczany w zmiennej członkowskiej o nazwietutoriali dołączone do obiektu zakresu. - Po symbolu filtra (|) następuje
jsonfiltr, który serializuje obiekt do wciętego tekstu JSON.
⚠️ korekta: W oryginale wartość ta została opisana jako „liczba” i „ciąg znaków typu JSON”. Nie jest ani jednym, ani drugim. Jest to JavaObiekt skryptu, a filtr JSON konwertuje go na ciąg JSON w celu wyświetlenia.
Wyjście:
Te pięć filtrów obejmuje typowe przypadki. Jeśli żaden nie generuje oczekiwanego wyniku, piszesz własny.
Filtr niestandardowy AngularJS
Czasami wbudowane filtry w AngularJS nie spełniają wymagań dotyczących formatowania danych wyjściowych. W takim przypadku można utworzyć niestandardowy filtr AngularJS, który zwróci dane wyjściowe w wymagany sposób.
Filtr niestandardowy jest rejestrowany w module i zachowuje się dokładnie tak samo, jak filtr wbudowany. Poniższe sekcje najpierw omówią filtry standardowe, ponieważ filtr niestandardowy używa tej samej składni potoku, a następnie pokażą, jak go utworzyć.
Jak utworzyć niestandardowy filtr w AngularJS
W poniższym przykładzie ciąg znaków przechodzi z kontroler do widoku poprzez obiekt zakresu, ale nie powinien być wyświetlany w obecnej postaci. Filtr niestandardowy w angularjs dołącza kolejny ciąg i wyświetla kompletny wynik.
<!-- The head and library references are unchanged --> <div ng-app="DemoApp" ng-controller="DemoController"> This tutorial is {{tutorial | Demofilter}} </div> <script> var app = angular.module('DemoApp', []); // The factory runs once; the function it returns runs on every value app.filter('Demofilter', function() { return function(input) { return input + " Tutorial"; }; }); app.controller('DemoController', ['$scope', function($scope) { $scope.tutorial = "Angular"; }]); </script>
Code Wyjaśnienie
- Ciąg „Angular” jest umieszczany w zmiennej członkowskiej o nazwie
tutoriali dołączone do obiektu zakresu. - AngularJS zapewnia
filterMetoda rejestracji używana do tworzenia niestandardowego filtra. Nazywa się „Demofilter” i to do niej odnosi się widok. - To jest standardowy kształt niestandardowego filtra: zarejestrowaną funkcją jest fabryka Zwraca funkcję, która wykonuje zadanie. Funkcja ta otrzymuje filtrowaną wartość jako pierwszy parametr i zwraca wynik — w tym przypadku dane wejściowe z dołączonym słowem „Tutorial”.
- Filtr stosuje się w widoku za pomocą tej samej składni potoku, co każdy filtr wbudowany.
💡 Wskazówka: Nazwy filtrów są zazwyczaj pisane małymi literami lub literami camelCase. „Demofilter” działa, ale nazwa taka jak appendTutorial czyta się lepiej i nie koliduje z nazwą wbudowaną.
Wyjście:
Do przekazanego ciągu znaków dodano słowo „Samouczek” tutorial zmienna. Ten filtr zawsze dodaje ten sam tekst, który można skonfigurować w następnej sekcji.
Jak przekazać argumenty do niestandardowego filtra
Powyższy filtr na stałe koduje dodawany tekst, więc może wykonywać tylko jedną czynność. Wbudowane filtry, takie jak number:2 akceptują argument po dwukropku, a niestandardowy filtr też może: każdy parametr po pierwszym jest mapowany na argument oddzielony dwukropkiem w widoku.
Wymagane są trzy kroki: dodanie parametrów po input w zwracanej funkcji podaj wartość domyślną dla wszystkiego, co opcjonalne, tak aby filtr nadal działał, gdy argument zostanie pominięty, a następnie przekaż argumenty w widoku, rozdzielając je dwukropkami.
app.filter('appendText', function() { return function(input, suffix, separator) { if (!input) { return input; } // guard against undefined separator = typeof separator === 'undefined' ? ' ' : separator; return input + separator + suffix; }; });
Widok wygląda następująco, gdzie „Samouczek” staje się suffix a myślnik staje się separator.
{{tutorial | appendText:"Tutorial"}} // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}} // Angular - Tutorial
Dwa szczegóły łatwo przeoczyć. Argumenty to wyrażenia AngularJS, więc dosłowny ciąg znaków musi być ujęty w cudzysłów, podczas gdy słowo bez cudzysłowu jest odczytywane jako właściwość zakresu. Filtry również łączą się w łańcuch, każdy z nich otrzymuje wynik poprzedniego: {{tutorial | appendText:"Tutorial" | uppercase}}.
⚠️ Ostrzeżenie: Utrzymuj czysty filtr — ten sam wynik dla tego samego wejścia, bez zmian zewnętrznych. AngularJS buforuje czysty filtr i uruchamia go ponownie tylko po zmianie danych wejściowych. Filtr odczytujący zegar lub mutujący usługę musi być oznaczony. $stateful, która wyłącza buforowanie i uruchamia filtr przy każdym cyklu przetwarzania, co jest częstą przyczyną powolnego ładowania się stron.
Filtry nie są ograniczone do szablonów. Ten sam filtr można wywołać z JavaSkrypt, jak pokazano poniżej.
Jak używać filtrów w kontrolerze z usługą $filter
Zastosowanie filtra w widoku to typowy przypadek, ale czasami przekształcona wartość jest potrzebna w kontrolerze, na przykład przed wysłaniem danych do serwera. AngularJS udostępnia każdy zarejestrowany filtr, zarówno wbudowany, jak i niestandardowy, poprzez $filter Usługa. Wstrzyknij ją, wywołaj z nazwą filtra, aby pobrać funkcję filtru, a następnie wywołaj ją z wartością i argumentami.
app.controller('DemoController', ['$scope', '$filter', function($scope, $filter) { $scope.tutorial = "Angular"; // Built-in filters, called from JavaScript $scope.shouted = $filter('uppercase')($scope.tutorial); // "ANGULAR" $scope.price = $filter('currency')(20.56); // "$20.56" // A custom filter works exactly the same way $scope.full = $filter('appendText')($scope.tutorial, "Tutorial"); }]);
Istnieje również krótsza forma: wstrzyknięcie nazwy filtra, a następnie Filter, Takie jak uppercaseFilter, zapewnia funkcję filtru bezpośrednio i można ją wywołać natychmiast. Obie formy odpowiadają tej samej funkcji, więc wybór jest stylistyczny.
Dwa zastosowania pojawiają się wielokrotnie. Pierwsze to przygotowanie ładunku: data zazwyczaj musi dotrzeć do API w ustalonym wzorcu, a $filter('date')(value, 'yyyy-MM-dd') generuje go bez dotykania wartości powiązanej z formularzem. Drugim sposobem jest zawężenie kolekcji w kontrolerze, zamiast pozostawiania orderBy w sposób ng-powtórz wyrażenie, które jest uruchamiane ponownie przy każdym skrócie.
Filtry wstrzykiwane w ten sposób są nadal rejestrowane w module, dlatego należy zadeklarować niestandardowy filtr za pomocą app.filter zanim jakikolwiek kontroler zapyta $filter W przeciwnym razie AngularJS zgłosi błąd nieznanego dostawcy.
Wywołanie filtra w JavaSkrypt różni się od szablonu w jednym istotnym aspekcie: wynik jest obliczany raz i przechowywany w zakresie, a nie przeliczany przy każdym skrócie. To sprawia, że ​​jest to szybsza opcja dla wartości, która rzadko się zmienia, i niewłaściwa opcja dla wartości, która musi… track dane wejściowe użytkownika.
