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

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

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

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

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

Так само для чисел можна використовувати інші фільтри. Під час цього уроку ми побачимо різні стандартні вбудовані фільтри, доступні в Angular.

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

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

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Пояснення коду

Тут ми передаємо рядок «Angular» у змінну-член під назвою tutorial і приєднуємо її до об’єкта scope.
Angular надає сервіс фільтрів, який можна використовувати для створення нашого спеціального фільтра. «Демофільтр» — це назва нашого фільтра.
Це стандартний спосіб визначення спеціальних фільтрів в AngularJS, у якому повертається функція. Ця функція містить спеціальний код для створення спеціального фільтра. У нашій функції ми беремо рядок «Angular», який передається з нашого представлення у фільтр, і додаємо до нього рядок «Tutorial».
Ми використовуємо наш демофільтр для нашої змінної-члена, яка була передана від контролера до представлення.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

Видно, що застосовано наш спеціальний фільтр
Слово «Навчальний посібник» було додано в кінець рядка, який було передано в змінну-член підручник.

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

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

Давайте розглянемо приклад фільтрів AngularJS із опцією AngularJS to smaller.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Пояснення коду

Тут ми передаємо рядок, який є комбінацією символів нижнього та верхнього регістрів у змінній-члені під назвою “tutorialName” та приєднуємо його до об’єкта scope. Значення рядка, що передається, – «AngularJS».
Ми використовуємо змінну-член «tutorialName» і ставимо символ фільтра (|), який означає, що вихідні дані потрібно змінити за допомогою фільтра. Потім ми використовуємо ключове слово в нижньому регістрі, щоб сказати, що використовувати вбудований фільтр для виведення всього рядка в нижньому регістрі.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З вихідного

Можна побачити, що рядок «AngularJS», який був переданий у змінній tutorialName, яка була комбінацією символів нижнього та верхнього регістрів, було виконано.
Після виконання кінцевий результат буде в нижньому регістрі, як показано вище.

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

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

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

У наведеному нижче прикладі використання великої літери в AngularJS ми будемо використовувати контролер для надсилання рядка в представлення через об’єкт scope. Потім ми використаємо фільтр у поданні, щоб перетворити рядок у верхній регістр.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Пояснення коду

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

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

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

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

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

Давайте розглянемо приклад фільтрів AngularJS із опцією числа.

У наведеному нижче прикладі,

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

Ми будемо використовувати контролер, щоб надіслати число в представлення через об’єкт scope. Потім ми використаємо фільтр у поданні, щоб застосувати числовий фільтр.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Пояснення коду

Тут ми передаємо число з більшою кількістю десяткових знаків у змінній-члені під назвою tutorialID і приєднуємо його до об’єкта scope.
Ми використовуємо змінну-учасник tutorialID і додаємо символ фільтра (|) разом із числовим фільтром. Тепер у номері:2 два вказують на те, що фільтр має обмежити кількість десяткових знаків до 2.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

Можна побачити, що число, передане в змінну tutorialID, яка мала велику кількість десяткових знаків, було обмежено 2 знаками після коми через число: 2 фільтри, які було застосовано.

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

Цей фільтр форматує фільтр валюти до числа.

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

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Пояснення коду

Тут ми передаємо число в змінну-член під назвою tutorialprice і приєднуємо його до об’єкта scope.
Ми використовуємо змінну учасників tutorialprice і додаємо символ фільтра (|) разом із фільтром валюти. Зауважте, що застосована валюта залежить від налаштувань мови, застосованих до машини.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З вихідного

Можна побачити, що символ валюти додано до числа, переданого в змінній tutorialprice.
У нашому випадку, оскільки налаштуваннями мови є англійська (Сполучені Штати), символ $ вставляється як валюта.

Фільтр JSON в AngularJS

Цей фільтр форматує a JSON як вхідні дані та застосовує фільтр AngularJS JSON, щоб надати вихідні дані в JSON.

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

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Пояснення коду

Тут ми передаємо число в змінну-член під назвою «tutorial» і приєднуємо його до об’єкта scope. Ця змінна-член містить рядок типу JSON з ідентифікатором Tutorial: 12 і TutorialName: "Angular".
Ми використовуємо підручник зі змінними-членами та додаємо символ фільтра (|) разом із фільтром JSON.

Якщо код виконано успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

Можна побачити, що JSON-подібний рядок аналізується та відображає належний об’єкт JSON у браузері.

Підсумки

Фільтри використовуються для зміни способу відображення результату для користувача.
Angular надає вбудовані фільтри, такі як фільтри нижнього та верхнього регістрів, щоб змінити вихід рядків на нижній та верхній регістри відповідно.
Існує також можливість змінити спосіб відображення чисел за допомогою фільтра чисел, вказавши кількість десяткових знаків, які мають відображатися в числі.
Можна також використовувати фільтр валюти, щоб додати символ валюти до будь-якого числа.
Якщо є вимога мати спеціальний вихід JSON, angular також надає фільтр JSON для фільтрації будь-якого JSON-подібного рядка у формат JSON.
Якщо є вимога, якій не відповідає жоден із фільтрів, визначених у angular, ви можете створити власний фільтр і додати свій власний код, щоб визначити тип результату, який ви хочете отримати від фільтра.

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

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

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

Пояснення коду

СТАТТІ ПО ТЕМІ

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

Пояснення коду

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

Пояснення коду

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

Пояснення коду

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

Пояснення коду

Фільтр JSON в AngularJS

Пояснення коду

Підсумки

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