AngularJS - 过滤器：数据转换的友好指南

你好，未来的编程超级巨星！? 今天，我们将踏上一段激动人心的旅程，探索AngularJS过滤器的世界。如果你是编程新手，不用担心——我会一直陪伴你，一步一步地解释所有内容。在本教程结束时，你将能够像专业人士一样过滤数据！

AngularJS - Filters

AngularJS中的过滤器是什么？

在我们深入了解之前，让我们先了解一下过滤器是什么。想象你有一根魔法棒，可以立即转换数据。这在AngularJS中过滤器的本质上就是如此！它们接收你的数据并以不同的格式呈现，而不改变原始数据。酷不酷？

现在，让我们探索一些AngularJS中最常用的过滤器。

大写过滤器：充分利用伟大

它的作用

大写过滤器如其名称所示——它将字符串中的所有字符转换为大写。

如何使用

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

输出

HELLO, WORLD!

解释

在这个例子中，我们从一个小写字符串 "hello, world!" 开始。| 符号就像一根魔法管，将我们的文本发送到大写过滤器中。结果呢？一个响亮且自豪的 "HELLO, WORLD!"。

小写过滤器：保持低调

它的作用

正如你可能猜到的，小写过滤器与大写过滤器相反——它将所有字符转换为小写。

如何使用

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

输出

shout out to angularjs!

解释

在这里，我们从一个大写字符串开始。小写过滤器降低了音量，给我们一个更温和的 "shout out to angularjs!"。

货币过滤器：给我看看钱！

它的作用

货币过滤器将数字格式化为货币。默认情况下，它使用美元符号，但你可以自定义。

如何使用

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

输出

$9.99
€9.99

解释

在第一行中，我们将9.99格式化为美元。在第二行中，我们告诉过滤器使用欧元符号。魔法，不是吗？

过滤过滤器：在干草堆中寻找针

它的作用

过滤...过滤器（是的，有点令人困惑！）帮助你搜索数组并返回匹配的项。

如何使用

<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' 的名字。只有John匹配，所以他是不显示的唯一一个。

排序过滤器：把事情安排得井井有条

它的作用

排序过滤器根据一个或多个标准对数组进行排序。

如何使用

<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

解释

在这个例子中，我们按年龄升序排列我们的朋友。如果我们想要降序，我们可以使用 '-age' 代替。

把它们放在一起：一个完美的例子

现在，让我们结合多个过滤器，看看它们在一起有多强大！

<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>名称</th>
<th>价格</th>
</tr>
<tr ng-repeat="product in products | filter:searchText | orderBy:'price'">
<td>{{product.name | uppercase}}</td>
<td>{{product.price | currency}}</td>
</tr>
</table>

解释

我们从一个产品数组开始。
我们创建一个输入字段，使用 ng-model 绑定到 searchText。
在我们的表格中，我们使用 ng-repeat 遍历我们的产品。
我们应用 filter 过滤器基于 searchText 进行搜索。
然后我们使用 orderBy 对结果按价格排序。
对于每个产品，我们以大写显示名称，并将价格格式化为货币。

这个例子结合了搜索、排序和格式化，一举三得！

总结

恭喜你！你已经迈出了进入AngularJS过滤器世界的第一步。记住，过滤器就像你数据的私人造型师——它们帮助你以最合适和吸引人的方式呈现信息。

在你继续使用AngularJS的旅程中，你会发现更多使用过滤器来让你的应用发光的方式。继续练习，保持好奇心，最重要的是，玩得开心！在你意识到之前，你将能够创建出让每个人都惊叹的出色网络应用。

快乐编码，未来的AngularJS大师！?

过滤器	目的	语法
uppercase	将字符串转换为大写	{{ 表达式
lowercase	将字符串转换为小写	{{ 表达式
currency	将数字格式化为货币	{{ 表达式
filter	从数组中选择子集	{{ 数组
orderBy	按表达式对数组进行排序	{{ 数组

Credits: Image by storyset