AngularJS - Фильтры: Ваш верный гид по трансформации данных

Привет, будущий суперзвезда программирования! ? Сегодня мы отправимся в увлекательное путешествие в мир фильтров AngularJS. Не волнуйтесь, если вы новички в программировании – я буду рядом с вами и explainню все шаг за шагом. К концу этого учебника вы будете фильтровать данные как профи!

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

Прежде чем мы углубимся в детали, давайте поймем, что такое фильтры. Представьте себе магическую палочку, которая может instantly transform данные. Вот что фильтры делают в AngularJS! Они берут ваши данные и представляют их в другом формате, не изменяя исходные данные. Круто, правда?

Теперь давайте рассмотрим некоторые из самых commonly used фильтров в AngularJS.

Фильтр upperCase: Использование величия

Что он делает

Фильтр upperCase делает exactly то, что вы думаете – он преобразует все символы в строке в верхний регистр.

Как использовать его

<p>{{ "hello, world!" | upperCase }}</p>

Вывод

HELLO, WORLD!

Объяснение

В этом примере мы начинаем с нижнего регистра строки "hello, world!". Символ | похож на магическую трубу, которая отправляет наш текст через фильтр upperCase. Результат? Громкий и гордый "HELLO, WORLD!".

Фильтр lowerCase: Удержание спокойствия

Что он делает

Как вы можете猜ать, фильтр lowerCase делает обратное upperCase – он преобразует все символы в нижний регистр.

Как использовать его

<p>{{ "SHOUT OUT TO ANGULARJS!" | lowerCase }}</p>

Вывод

shout out to angularjs!

Объяснение

Здесь мы начинаем с строки целиком в верхнем регистре. Фильтр lowerCase снижает громкость, давая нам более сдержанный "shout out to angularjs!".

Фильтр currency: Покажи мне деньги!

Что он делает

Фильтр currency форматрует число как валюту. По умолчанию он использует доллар, но вы можете настроить его.

Как использовать его

<p>{{ 9.99 | currency }}</p>
<p>{{ 9.99 | currency:"€" }}</p>

Вывод

$9.99
€9.99

Объяснение

В первой строке мы форматируем 9.99 как доллары США. Во второй строке мы говорим фильтру использовать евро символ вместо. Магия, не так ли?

Фильтр filter: Ищем иголки в стоге сена

Что он делает

Фильтр filter помогает вам искать через массивы и возвращать соответствующие элементы.

Как использовать его

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | filter:{name:'o'}">
{{friend.name}}
</li>

Вывод

John

Объяснение

Здесь мы ищем в массиве друзей имена, содержащие 'o'. Only John соответствует, поэтому он единственный, кто отображается.

Фильтр orderBy: Порядок веще

Что он делает

Фильтр orderBy сортирует массив по одному или нескольким критериям.

Как использовать его

<script>
$scope.friends = [
{name:'John', age:25},
{name:'Mary', age:28},
{name:'Peter', age:35}
];
</script>

<li ng-repeat="friend in friends | orderBy:'age'">
{{friend.name}} - {{friend.age}}
</li>

Вывод

John - 25
Mary - 28
Peter - 35

Объяснение

В этом примере мы сортируем своих друзей по возрасту в возрастающем порядке. Если бы мы хотели descendling порядок, мы могли бы использовать '-age' вместо.

Combining It All Together: A Grand Example

Теперь давайте combine multiple фильтры, чтобы увидеть, насколько они могут быть мощными вместе!

<script>
$scope.products = [
{name:'Laptop', price:999.99},
{name:'Smartphone', price:599.99},
{name:'Tablet', price:299.99}
];
</script>

<input type="text" ng-model="searchText">
<table>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | upperCase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

Объяснение

1. Мы начинаем с массива продуктов.
2. Мы создаем поле ввода, связанное с searchText с помощью ng-model.
3. В нашей таблице мы используем ng-repeat для перебора наших продуктов.
4. Мы применяем фильтр filter для поиска на основе searchText.
5. Затем мы используем orderBy для сортировки результатов по цене.
6. Для каждого продукта мы отображаем имя в верхнем регистре и цену в формате валюты.

Этот пример combines搜索, сортировку и форматирование все в одном!

Заключение

Поздравляю! Вы только что сделали свои первые шаги в мир фильтров AngularJS. Помните, что фильтры – это как личный стилист ваших данных – они помогают представить вашу информацию в наиболее подходящем и привлекательном виде.

Пока вы продолжаете свое путешествие с AngularJS, вы обнаружите еще больше способов использовать фильтры, чтобы сделать ваши приложения сияющими. Продолжайте практиковаться, оставайтесь любопытными и, самое главное, получайте удовольствие! Before вы знаете это, вы будете создавать потрясающие веб-приложения, которые поразят всех.

Счастливого кодирования, будущий大师 AngularJS! ?

Фильтр	Цель	Синтаксис
upperCase	Преобразует строку в верхний регистр	{{ expression
lowerCase	Преобразует строку в нижний регистр	{{ expression
currency	Форматирует число как валюту	{{ expression
filter	Выбирает подмножество элементов из массива	{{ array
orderBy	Сортирует массив по выражению	{{ array

Credits: Image by storyset