AngularJS филтри и персонализиран филтър AngularJS с пример

Какво е филтър в AngularJS?

A Филтрирайте в AngularJS помага да се форматира стойността на израз за показване на потребителя, без да се променя оригиналният формат. Например, ако искате низът ви да е с малки или главни букви, можете да го направите с помощта на филтри. Има вградени филтри като „малки букви“, „главни букви“, които могат да извличат съответно малките и главните букви.

Персонализиран филтър AngularJS

Понякога вградените филтри в Angular не могат да отговорят на нуждите или изискванията за филтриране на изхода. В такъв случай може да се създаде потребителски филтър AngularJS, който може да предаде изхода по необходимия начин.

По същия начин за числа можете да използвате други филтри. По време на този урок ще видим различните стандартни вградени филтри, налични в Angular.

Как да създадете персонализиран филтър в AngularJS

В примера за персонализиран филтър AngularJS по-долу ще предадем низ към изгледа от контролера чрез обекта на обхвата, но не искаме низът да се показва такъв, какъвто е.

Искаме да сме сигурни, че всеки път, когато показваме низа, ще подадем персонализиран филтър 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, и го прикачваме към обекта на обхвата.
Angular предоставя услугата за филтриране, която може да се използва за създаване на наш персонализиран филтър. „Демофилтър“ е име, дадено на нашия филтър.
Това е стандартният начин, по който се дефинират персонализирани филтри в AngularJS, при които се връща функция. Тази функция съдържа персонализирания код за създаване на персонализиран филтър. В нашата функция ние вземаме низ „Angular“, който се предава от нашия изглед към филтъра и добавяме низа „Tutorial“ към него.
Ние използваме нашия демофилтър на нашата членска променлива, която беше предадена от контролера към изгледа.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От изхода,

Вижда се, че нашият персонализиран филтър е приложен и
Думата „Урок“ е добавена в края на низа, който беше предаден в ръководството за членска променлива.

Филтър за малки букви в 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 | lowercase}}

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

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

</body>
</html>

Обяснение на кода

Тук предаваме низ, който е комбинация от малки и главни букви в членска променлива, наречена „tutorialName“, и го прикрепяме към обекта на обхвата. Стойността на предавания низ е „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“, и го прикрепяме към обекта на обхвата.
Използваме членската променлива „tutorialName“ и поставяме символ за филтър (|), което означава, че изходът трябва да бъде модифициран с помощта на филтър. След това използваме ключовата дума с главни букви, за да кажем да използваме вградения филтър за извеждане на целия низ с главни букви.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От изхода,

Може да се види, че низът, който беше предаден в променливата 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, и го прикачваме към обекта на обхвата.
Използваме членската променлива tutorialID и поставяме филтърен символ (|) заедно с числовия филтър. Сега в number: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, и го прикачваме към обекта на обхвата.
Използваме променливата за член tutorialprice и поставяме символ за филтър (|) заедно с валутния филтър. Имайте предвид, че валутата, която се прилага, зависи от езиковите настройки, които се прилагат към машината.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От изхода

Може да се види, че символът на валутата е добавен към числото, което е предадено в променливата tutorialprice.
В нашия случай, тъй като езиковите настройки са английски (САЩ), символът $ се вмъква като валута.

JSON филтър в AngularJS

Този филтър форматира a JSON като вход и прилага AngularJS JSON филтъра, за да даде изхода в JSON.

В примера по-долу ще използваме контролер, за да изпратим обект тип JSON към изглед чрез обекта за обхват. След това ще използваме филтър в изгледа, за да приложим 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>

Обяснение на кода

Тук предаваме число в членска променлива, наречена „урок“, и го прикачваме към обекта на обхвата. Тази членска променлива съдържа низ тип JSON от Tutorial ID:12 и TutorialName:”Angular”.
Използваме урока за променливите член и поставяме символ за филтър (|) заедно с JSON филтъра.

Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.

Изход:

От изхода,

Може да се види, че JSON като низ се анализира и показва правилен JSON обект в браузъра.

Oбобщение

Филтрите се използват за промяна на начина, по който изходът се показва на потребителя.
Angular предоставя вградени филтри, като филтри за малки и главни букви, за да промените изхода на низовете съответно на малки и главни букви.
Съществува и разпоредба за промяна на начина, по който се показват числата, като използвате филтъра за числа, като посочите броя на десетичните точки, които да се показват в числото.
Можете също така да използвате валутния филтър, за да добавите символа на валутата към произволно число.
Ако има изискване да има JSON специфичен изход, angular също предоставя JSON филтър за филтриране на всеки JSON подобен низ във формат JSON.
Ако има изискване, което не е изпълнено от някой от филтрите, дефинирани в angular, тогава можете да създадете свой персонализиран филтър и да добавите своя персонализиран код, за да определите вида на изхода, който искате от филтъра.

Какво е филтър в AngularJS?

Персонализиран филтър AngularJS

Как да създадете персонализиран филтър в AngularJS

Обяснение на кода

СВЪРЗАНИ СТАТИИ

Филтър за малки букви в AngularJS

Обяснение на кода

Филтър за главни букви в AngularJS

Обяснение на кода

Числов филтър в AngularJS

Обяснение на кода

Валутен филтър в AngularJS

Обяснение на кода

JSON филтър в AngularJS

Обяснение на кода

Oбобщение

Регистрирайте се за бюлетина