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

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

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

⚠️ Бележка към версията: AngularJS (клон 1.x) достигна края на жизнения си цикъл на 31 декември 2021 г. и не получава допълнителни корекции за сигурност. Всичко по-долу остава валидно за поддръжка на съществуващите AngularJS приложения; в съвременния Angular същата роля се изпълнява от канал (pipe).

Филтрите се прилагат в изгледа с вертикална черта. Преди да разгледате всеки един от тях, е полезно да знаете защо бихте написали свой собствен.

Филтър за малки букви в 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 Обяснение

1. Низът със смесени главни и малки букви „Angular JS“ се поставя в членска променлива, наречена tutorialName върху обекта на обхвата.
2. Символът за филтър (|) маркира изхода за трансформация, а 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 Обяснение

1. Низът със смесени главни и малки букви „Angular JS“ е поставен в tutorialName и е прикрепен към обекта на обхвата.
2. Символът за филтър (|) е последван от 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 Обяснение

1. Число с много десетични знаци се поставя в членска променлива, наречена tutorialID и е прикрепен към обекта на обхвата.
2. Символът за филтър (|) е последван от 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 Обяснение

1. Число се поставя в членска променлива, наречена tutorialprice и е прикрепен към обекта на обхвата.
2. Символът за филтър (|) е последван от currency филтър.

⚠️ Корекция: В оригинала се твърди, че валутата „зависи от езиковите настройки, приложени към машината“. Не е така. AngularJS използва локализацията, включена в библиотеката, en-US по подразбиране, така че символът е $, независимо от операционната система. Заредете съответстващото angular-locale_*.js файл или предайте символа директно: {{tutorialprice | currency:"£"}}.

Изход:

Низовете и числата са прости стойности. Последният вграден филтър обработва цели обекти.

JSON филтър в AngularJS

Този филтър преобразува обект във форматиран JSON низ, който е полезен за проверка на данните за обхвата по време на разработка.

В примера по-долу, контролер изпраща обект към изгледа чрез обекта scope и 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 Обяснение

1. Обект, държащ TutorialID: 12 намлява tutorialName: "Angular" се поставя в членска променлива, наречена tutorial и е прикрепен към обекта на обхвата.
2. Символът за филтър (|) е последван от json филтър, който сериализира обекта в JSON текст с отстъп.

⚠️ Корекция: Оригиналът описа тази стойност като „число“ и като „низ от тип JSON“. Тя не е нито едното, нито другото. Тя е JavaОбект Script, а json филтърът го преобразува в JSON низ за показване.

Изход:

Тези пет филтъра покриват често срещаните случаи. Когато никой не произвежда необходимия ви резултат, пишете свой собствен.

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

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

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

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

В примера по-долу, низ преминава от регулатор към изгледа чрез обекта scope, но не трябва да се показва такъв, какъвто е. Персонализиран филтър в 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 Обяснение

1. Низът „Angular“ се поставя в членска променлива, наречена tutorial и е прикрепен към обекта на обхвата.
2. AngularJS предоставя filter метод за регистрация, използван за създаване на персонализиран филтър. „Демофилтър“ е името, дадено му, и това име е името, към което се отнася изгледът.
3. Това е стандартната форма на персонализиран филтър: регистрираната функция е фабрика връщайки функцията, която извършва работата. Тази функция получава филтрираната стойност като първи параметър и връща резултата — тук, входът с добавен „Tutorial“.
4. Филтърът се прилага в изгледа, използвайки същия синтаксис на канал, както всеки вграден филтър.

💡 Съвет: Имената на филтрите обикновено се пишат с малки букви или с камилски регистър. „Демофилтър“ работи, но име като 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 потребителски вход.

Въпроси и Отговори