Фільтри AngularJS і спеціальний фільтр AngularJS із прикладом

⚡ Розумний підсумок

Фільтр в AngularJS форматує значення виразу для відображення, не змінюючи базові дані. Вбудовані фільтри охоплюють регістр, числа, валюту та JSON, тоді як користувацький фільтр обробляє будь-яке правило форматування, яке ще не передбачено фреймворком.

🧾 Основний принцип: Фільтр перетворює лише те, що відображається у вигляді; значення, що зберігається в об'єкті області видимості, ніколи не змінюється.
➖ Синтаксис вертикальної сітки: Вертикальна риски відокремлює вираз від назви фільтра, а двокрапка передає йому аргумент.
🔤 Фільтри корпусу: Використання нижніх та верхніх літер перетворює рядок для відображення, а в AngularJS не існує фільтра використання великих літер.
🔢 Номер та валюта: число обмежує кількість знаків після коми, тоді як валюта додає до значення символ, залежний від локалі.
🛠️ Спеціальні фільтри: Реєстрація фабрики, яка повертає функцію, створює фільтр багаторазового використання, доступний для всього модуля.
⚡ Чистота має значення: Фільтр повинен повертати той самий результат для тих самих вхідних даних, оскільки AngularJS кешує результати та пропускає повторний запуск чистих фільтрів.

Детальніше

Що таке фільтр в AngularJS?

A Фільтрувати в AngularJS допомагає форматувати значення виразу для відображення користувачеві без зміни початкового значення. Наприклад, якщо ви хочете, щоб рядок відображався як у нижньому, так і у верхньому регістрі, ви можете зробити це за допомогою фільтрів. Вбудовані фільтри, такі як «нижній регістр» та «верхній регістр», повертають рядок у потрібному регістрі, а також існують додаткові фільтри для чисел, валюти та JSON.

⚠️ Примітка до версії: AngularJS (гілка 1.x) досягла кінця життєвого циклу 31 грудня 2021 року та не отримує подальших виправлень безпеки. Все, що наведено нижче, залишається актуальним для підтримки існуючих програм AngularJS; у сучасному Angular ту саму роль виконує канал.

Фільтри застосовуються у поданні за допомогою символу вертикальної лінії. Перш ніж розглядати кожен з них, корисно знати, чому ви повинні писати свої власні.

Фільтр нижнього регістру в AngularJS

Цей фільтр приймає рядок і відображає всі його символи в нижньому регістрі.

Нижче, контролер надсилає рядок до представлення через об'єкт scope, а фільтр перетворює його на нижній регістр.

<!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 Пояснення

Рядок зі змішаним регістром символів «Angular JS» поміщається в змінну-член під назвою tutorialName на об'єкті області видимості.
Символ фільтра (|) позначає вихід для перетворення, а lowercase ключове слово застосовує вбудований фільтр, який відображає весь рядок у нижньому регістрі.

⚠️ Виправлення застосовано до кожного оголошення. Усі шість оригінальних зразків мали три спільні дефекти. chrset="UTF 8" не є дійсним атрибутом або кодуванням, і тепер charset="UTF-8". angular-route.js навантажений перед тим angular.min.js, що видає помилку модуля, і ніколи не використовувався — його було видалено, як і невикористане посилання на jQuery. У тексті також стверджувалося, що значення було «AngularJS», тоді як набір коду — «Angular JS»; тепер текст збігається.

вихід:

Рядок зі змішаним регістром повністю відображатиметься в нижньому регістрі. Протилежне перетворення працює так само.

Фільтр верхнього регістру в AngularJS

Цей фільтр є аналогом фільтра нижнього регістру, відображаючи кожен символ у верхньому регістрі.

Нижче, контролер надсилає рядок до представлення через об'єкт scope, а фільтр перетворює його у верхній регістр.

<!-- 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 Пояснення

Рядок зі змішаним регістром символів «Angular JS» поміщається в tutorialName та приєднаний до об'єкта області видимості.
Після символу фільтра (|) йде uppercase ключове слово, тому вбудований фільтр відображатиме весь рядок у верхньому регістрі.

⚠️ виправлення: В оригіналі цей розділ був представлений як «приклад фільтра великих літер в AngularJS з опцією використання нижніх літер», що двічі неправильно. У цьому розділі демонструється фільтр великих літер, а в AngularJS взагалі немає фільтра великих літер — використання великої літери лише першої літери вимагає власного фільтра, який, як його створити, буде показано в наступних розділах.

вихід:

Фільтри регістру не приймають аргументів. Наступний фільтр показує, як двокрапка передає параметр фільтру.

Фільтр чисел в AngularJS

Цей фільтр форматує число та може обмежити кількість відображаних знаків після коми.

У наведеному нижче прикладі використовується числовий фільтр для відображення значення, обмеженого двома знаками після коми. Контролер надсилає число до представлення через об'єкт scope, і фільтр застосовується у представленні.

<!-- 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 Пояснення

Число з багатьма знаками після коми поміщається в змінну-член під назвою tutorialID та приєднаний до об'єкта області видимості.
Після символу фільтра (|) йде number:2Двокрапка передає аргумент, а 2 встановлює два знаки після коми. Значення округлюється для відображення, тому 3.565656 відображається як 3.57, тоді як область видимості зберігає повне число.

вихід:

Форматування простого числа часто недостатньо, коли значення представляє гроші, що обробляє наступний фільтр.

Фільтр валют в AngularJS

Цей фільтр форматує число як значення валюти, додаючи перед ним символ валюти, наприклад, $.

У наведеному нижче прикладі контролер надсилає число до представлення через об'єкт scope, а фільтр валют застосовується до представлення.

<!-- 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 Пояснення

Число поміщається в змінну-член під назвою tutorialprice та приєднаний до об'єкта області видимості.
Після символу фільтра (|) йде currency фільтр

⚠️ виправлення: В оригіналі стверджувалося, що валюта «залежить від мовних налаштувань, застосованих до машини». Це не так. AngularJS використовує локаль, що постачається з бібліотекою, за замовчуванням en-US, тому символом є $ незалежно від операційної системи. Завантажте відповідний код. angular-locale_*.js файл або передайте символ безпосередньо: {{tutorialprice | currency:"£"}}.

вихід:

Рядки та числа – це прості значення. Останній вбудований фільтр працює з цілими об'єктами.

Фільтр JSON в AngularJS

Цей фільтр перетворює об'єкт на відформатований JSON рядок, який корисний для перевірки даних області видимості під час розробки.

У наведеному нижче прикладі контролер надсилає об'єкт до представлення через об'єкт області видимості, і JSON-фільтр застосовується до представлення.

<!-- 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 Пояснення

Об'єкт, що містить TutorialID: 12 та tutorialName: "Angular" поміщається у змінну-член під назвою tutorial та приєднаний до об'єкта області видимості.
Після символу фільтра (|) йде json фільтр, який серіалізує об'єкт у текст JSON з відступами.

⚠️ виправлення: В оригіналі це значення було описано як «число» та як «рядок типу JSON». Воно не є ні тим, ні іншим. Це JavaОб'єкт скрипту, а фільтр json перетворює його на рядок JSON для відображення.

вихід:

Ці п'ять фільтрів охоплюють поширені випадки. Якщо жоден з них не видає потрібного вам результату, ви пишете свій власний.

Спеціальний фільтр AngularJS

Іноді вбудовані фільтри в AngularJS не можуть задовольнити вимоги до форматування виводу. У такому випадку можна створити власний фільтр AngularJS, який повертає вивід у потрібному вигляді.

Користувацький фільтр реєструється в модулі, а потім поводиться точно так само, як вбудований. У розділах нижче спочатку розглядаються стандартні фільтри, оскільки користувацький фільтр використовує той самий синтаксис каналу, а потім показано, як створити свій фільтр.

Як створити спеціальний фільтр в AngularJS

У наведеному нижче прикладі рядок передається з контролер до вигляду через об'єкт області видимості, але не повинно відображатися як є. Користувацький фільтр у AngularJS додає ще один рядок і відображає завершений результат.

<!-- 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 Пояснення

Рядок «Angular» поміщається в змінну-член під назвою tutorial та приєднаний до об'єкта області видимості.
AngularJS надає filter Метод реєстрації, який використовується для створення власного фільтра. Йому надається ім'я «Демофільтр», і саме на це ім'я посилається представлення.
Це стандартна форма користувацького фільтра: зареєстрована функція — це завод повертаючи функцію, яка виконує роботу. Ця функція отримує значення, що фільтрується, як свій перший параметр і повертає результат — тут, вхідні дані з доданим текстом «Tutorial» (Посібник).
Фільтр застосовується у поданні з використанням того ж синтаксису вертикальної лінії, що й будь-який вбудований фільтр.

💡 Порада: Назви фільтрів зазвичай пишуться малими літерами або верблюжим регістром. «Демофільтр» працює, але назва, така як appendTutorial краще читається та уникає конфліктів із вбудованим ім'ям.

вихід:

Слово «Підручник» було додано до рядка, переданого в tutorial змінна. Цей фільтр завжди додає той самий текст, який можна налаштувати в наступному розділі.

Як передавати аргументи до користувацького фільтра

Фільтр вище жорстко закодує текст, який він додає, тому він може виконувати лише одну дію. Вбудовані фільтри, такі як number:2 приймати аргумент після двокрапки, як і користувацький фільтр: кожен параметр після першого відображається в аргументі, розділеному двокрапкою, у поданні.

Включає три кроки: додавання параметрів після input У повернутій функції вкажіть значення за замовчуванням для будь-чого необов'язкового, щоб фільтр все ще працював, навіть якщо аргумент пропущено, а потім передайте аргументи у вигляді, розділені двокрапками.

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

Тоді вигляд виглядає наступним чином, де «Підручник» стає suffix а дефіс стає separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Дві деталі легко пропустити. Аргументи – це вирази AngularJS, тому літерал рядка має бути взято в лапки, тоді як слово без лапок зчитується як властивість області видимості. Фільтри також утворюють ланцюжок, кожен з яких отримує вивід попереднього: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Увага! Зберігайте фільтр чистим — той самий вивід для тих самих вхідних даних, без зовнішніх змін. AngularJS кешує чистий фільтр і повторно запускає його лише тоді, коли вхідні дані змінюються. Фільтр, який зчитує годинник або змінює сервіс, має бути позначений $stateful, що вимикає кешування та запускає фільтр на кожному циклі дайджесту, що є поширеною причиною повільної роботи сторінок.

Фільтри не обмежуються шаблонами. Той самий фільтр можна викликати з JavaСценарій, як показано далі.

Як використовувати фільтри в контролері за допомогою сервісу $filter

Застосування фільтра у представленні є поширеним випадком, але перетворене значення іноді потрібне всередині контролера, наприклад, перед надсиланням даних на сервер. AngularJS надає доступ до кожного зареєстрованого фільтра, як вбудованого, так і користувацького, через $filter сервіс. Вставте його, викличте його з назвою фільтра, щоб отримати функцію фільтра, а потім викличте її зі значенням та будь-якими аргументами.

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

Також існує коротша форма: введення назви фільтра, а потім Filter, Такі, як uppercaseFilter, надає функцію фільтра безпосередньо, і її можна викликати негайно. Обидві форми призводять до однієї й тієї ж функції, тому вибір є стилістичним.

Два способи використання виникають постійно. Перший — це підготовка корисного навантаження: дата зазвичай має досягати API за фіксованим шаблоном, і $filter('date')(value, 'yyyy-MM-dd') створює його, не торкаючись значення, пов'язаного з формою. Другий спосіб — це звуження колекції один раз у контролері, а не виведення orderBy в ng-повтор вираз, де він повторно виконується при кожному дайджесті.

Фільтри, впроваджені таким чином, все ще зареєстровані в модулі, тому необхідно оголосити користувацький фільтр за допомогою app.filter перш ніж будь-який контролер запитає $filter для цього. В іншому випадку AngularJS видає помилку невідомого постачальника.

Виклик фільтра JavaСкрипт відрізняється від шаблону одним важливим чином: результат обчислюється один раз і зберігається в області видимості, а не перераховується при кожному дайджесті. Це робить його швидшим варіантом для значення, яке рідко змінюється, і неправильним варіантом для того, яке обов'язково змінюється. track введених користувачем даних.

Поширені запитання

Ні. AngularJS підтримує лише малі та великі літери. Для написання першої літери кожного слова з великої літери потрібен спеціальний фільтр, який розділяє рядок і перебудовує його, або правило перетворення тексту CSS, якщо зміна є суто візуальною.

Фільтр зареєстровано на іншому модулі, ніж той, що завантажено ng-app, або скрипт, що його визначає, виконується до завантаження AngularJS. Зареєструйте фільтр на тому ж модулі та спочатку завантажте бібліотеку.

Так. Піping колекція всередині ng-повтор фільтрує або впорядковує елементи перед їх відображенням. Фільтр отримує весь масив і повинен повернути масив.

Так. AI Помічники створюють фабрику, повернуту функцію та синтаксис представлення з простого опису правила форматування. Перевірте, чи згенерований фільтр захищає від невизначеного входу.

Інструменти штучного інтелекту переписують фабрику як клас, що реалізує PipeTransform, і переміщують кожен додатковий параметр у метод transform. Revпереглядати будь-який фільтр $stateful вручну, оскільки нечисті канали мають бути оголошені явно.

Фільтри AngularJS і спеціальний фільтр AngularJS із прикладом

Що таке фільтр в AngularJS?

Фільтр нижнього регістру в AngularJS

Code Пояснення

Фільтр верхнього регістру в AngularJS

Code Пояснення

Фільтр чисел в AngularJS

Code Пояснення

Фільтр валют в AngularJS

Code Пояснення

Фільтр JSON в AngularJS

Code Пояснення

Спеціальний фільтр AngularJS

Як створити спеціальний фільтр в AngularJS

Code Пояснення

Як передавати аргументи до користувацького фільтра

Як використовувати фільтри в контролері за допомогою сервісу $filter

Поширені запитання

Підсумуйте цей пост за допомогою:

Підпишіться на розсилку