Что такое фильтр в AngularJS?
Фильтр форматирует значение выражения для отображения пользователю.
Например, если вы хотите, чтобы ваши строки были либо в нижнем, либо в верхнем регистре, вы можете сделать это с помощью фильтров в Angular.
Существуют встроенные фильтры, такие как «нижний регистр», «верхний регистр», которые могут извлекать выходные данные в нижнем и верхнем регистре соответственно. Точно так же для чисел вы можете использовать другие фильтры.
В этом уроке мы увидим различные стандартные встроенные фильтры, доступные в Angular.
В этом уроке вы узнаете
Строчные
Этот фильтр принимает строковый вывод, форматирует строку и отображает все символы в строке в нижнем регистре.
Давайте рассмотрим пример фильтров 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">
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, которая была комбинацией строчных и прописных символов.
- После выполнения окончательный вывод выводится в нижнем регистре, как показано выше.
Верхний регистр
Этот фильтр похож на строчный фильтр; разница в том, что он принимает строковый вывод, форматирует строку и отображает все символы в строке в верхнем регистре.
Давайте рассмотрим пример фильтров Angular JS с опцией нижнего регистра.
В приведенном ниже примере мы будем использовать контроллер для отправки строки в представление через объект области видимости. Затем мы будем использовать фильтр в представлении для преобразования строки в верхний регистр.
<!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 с опцией number.
В приведенном ниже примере
Мы хотели продемонстрировать, как мы можем использовать числовой фильтр для форматирования отображаемого числа с ограничением в 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 и добавляем символ фильтра (|) вместе с числовым фильтром. Теперь в числе: 2, два указывает, что фильтр должен ограничить количество десятичных разрядов до 2.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Можно видеть, что число, которое было передано в переменной tutorialID, которая имела большое количество десятичных знаков, было ограничено двумя десятичными знаками из-за примененного числа: 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 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
Этот фильтр форматирует входные данные в формате JSON и применяет фильтр 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>
Объяснение кода:
- Здесь мы передаем число в переменную-член с именем «tutorial» и присоединяем его к объекту области. Эта переменная-член содержит строку типа JSON с идентификатором Tutorial ID: 12 и именем TutorialName: «Angular».
- Мы используем учебную переменную-член и помещаем символ фильтра (|) вместе с фильтром JSON.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий вывод.
Вывод:
Из вывода
- Можно видеть, что JSON-подобная строка анализируется и отображает правильный объект JSON в браузере.
Резюме:
- Фильтры используются для изменения способа отображения вывода пользователю.
- Angular предоставляет встроенные фильтры, такие как строчные и прописные фильтры, чтобы изменить вывод строк на строчные и прописные соответственно.
- Существует также положение об изменении способа отображения чисел с помощью числового фильтра путем указания количества десятичных знаков, отображаемых в числе.
- Можно также использовать фильтр валют, чтобы добавить символ валюты к любому числу.
- Если требуется наличие вывода, специфичного для json, angular также предоставляет фильтр JSON для фильтрации любой строки, подобной JSON, в формат JSON.