Фильтры AngularJS и пользовательский фильтр AngularJS с примером

Автор: Джеймс Хартман Джеймс Хартман
Hours обновлено

⚡ Умное резюме

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

  • 🧾 Основной принцип: Фильтр преобразует только то, что отображает представление; значение, хранящееся в объекте области видимости, никогда не изменяется.
  • ➖ Синтаксис конвейера: Вертикальная черта отделяет выражение от имени фильтра, а двоеточие передает ему аргумент.
  • 🔤 Фильтры обращений: Преобразование строки в нижний и верхний регистр позволяет отобразить строку, и в AngularJS отсутствует фильтр для изменения регистра.
  • 🔢 Число и валюта: В числовом представлении количество десятичных знаков ограничено, а в валютном представлении к значению добавляется символ, зависящий от локали.
  • 🇧🇷 Пользовательские фильтры: Регистрация фабрики, возвращающей функцию, создает многоразовый фильтр, доступный для всего модуля.
  • ⚡ Чистота имеет значение: Фильтр должен возвращать один и тот же результат для одного и того же входного значения, поскольку AngularJS кэширует результаты и пропускает повторное выполнение чистых фильтров.
Читать

Фильтры AngularJS и пользовательские фильтры

Что такое фильтр в AngularJS?

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

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

Фильтры применяются в представлении с использованием символа вертикальной черты (|). Прежде чем рассматривать каждый из них, полезно понять, зачем вы пишете свой собственный фильтр.

Фильтр строчных букв в AngularJS

Этот фильтр принимает строку и отображает все её символы в нижнем регистре.

Ниже контроллер отправляет строку в представление через объект scope, а фильтр преобразует её в нижний регистр.

Фильтр строчных букв в AngularJS

<!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

Строка, содержащая символы разного регистра, отображается полностью в нижнем регистре. Обратное преобразование работает аналогично.

Фильтр верхнего регистра в AngularJS

Этот фильтр является аналогом фильтра для строчных букв и отображает все символы в верхнем регистре.

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

Фильтр верхнего регистра в AngularJS

<!-- 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

Фильтры по типу «case» не принимают аргументов. Следующий фильтр показывает, как двоеточие передает параметр фильтру.

Числовой фильтр в AngularJS

Этот фильтр форматирует число и позволяет ограничить количество отображаемых десятичных знаков.

В приведенном ниже примере используется числовой фильтр для отображения значения, ограниченного двумя десятичными знаками. Контроллер отправляет число в представление через объект области видимости, и фильтр применяется в представлении.

Числовой фильтр в AngularJS

<!-- 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

Часто бывает недостаточно просто отформатировать число, если значение представляет собой деньги, и именно этим занимается следующий фильтр.

Не пропустите:

Валютный фильтр в AngularJS

Этот фильтр форматирует число как денежное значение, добавляя перед ним символ валюты, например, $.

В приведенном ниже примере контроллер отправляет число в представление через объект scope, и в представлении применяется фильтр валюты.

Валютный фильтр в AngularJS

<!-- 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:"£"}}.

Выход:

Валютный фильтр в AngularJS

Строки и числа представляют собой простые значения. Встроенный фильтр обрабатывает целые объекты.

JSON-фильтр в AngularJS

Этот фильтр преобразует объект в отформатированный формат. JSON строка, полезная для проверки данных области видимости во время разработки.

В приведенном ниже примере контроллер отправляет объект в представление через объект области видимости, и JSON-фильтр применяется в представлении.

JSON-фильтр в AngularJS

<!-- 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Объект скрипта, а JSON-фильтр преобразует его в строку JSON для отображения.

Выход:

JSON-фильтр в AngularJS

Эти пять фильтров охватывают распространенные случаи. Если ни один из них не дает нужного результата, вы можете написать свой собственный.

Пользовательский фильтр AngularJS

Иногда встроенные фильтры 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 объяснение

  1. Строка «Angular» помещается в переменную-член, которая называется tutorial и прикреплен к объекту области видимости.
  2. AngularJS предоставляет filter Метод регистрации, используемый для создания пользовательского фильтра. 'Demofilter' — это присвоенное ему имя, и именно на это имя ссылается представление.
  3. Это стандартная форма пользовательского фильтра: зарегистрированная функция представляет собой фабрика Возвращает функцию, которая выполняет работу. Эта функция получает значение, которое фильтруется, в качестве первого параметра и возвращает результат — в данном случае, входные данные с добавлением слова «Tutorial».
  4. Фильтр применяется в представлении с использованием того же синтаксиса конвейера, что и любой встроенный фильтр.

Примечание: Наконечник: Названия фильтров обычно пишутся строчными буквами или в стиле camelCase. «Demofilter» подходит, но название, например, такое: appendTutorial Читается лучше и не конфликтует со встроенным именем.

Выход:

Создать собственный фильтр в AngularJS

К переданной строке добавлено слово «Tutorial». 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 в нг-повторить выражение, которое перезапускается при каждом обновлении.

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

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

Часто задаваемые вопросы (FAQ)

Нет. AngularJS поддерживает только строчные и заглавные буквы. Для преобразования первой буквы каждого слова в заглавную требуется пользовательский фильтр, который разделяет строку и восстанавливает её, или правило CSS text-transform, если изменение носит чисто визуальный характер.

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

да. Пиping коллекция внутри нг-повторить Фильтры упорядочивают элементы перед их отображением. Фильтр получает весь массив и должен вернуть массив.

Да. AI Вспомогательные функции создают фабрику, возвращаемую функцию и синтаксис представления на основе простого описания правила форматирования. Убедитесь, что сгенерированный фильтр защищает от неопределенных входных данных.

Инструменты искусственного интеллекта переписывают фабрику как класс, реализующий интерфейс PipeTransform, и перемещают каждый дополнительный параметр в метод transform. RevПросматривайте любые фильтры с сохранением состояния вручную, поскольку нечистые каналы должны быть объявлены явно.

Подведем итог этой публикации следующим образом: