AngularJS - Filters：您的數據轉換好朋友指南

你好啊，未來的編程超級巨星！? 今天，我們將踏上一段令人興奮的旅程，進入 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 匹配，所以他是最唯一顯示的。

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

解釋

在這個例子中，我們按年齡升序對我們的朋友進行排序。如果我們想要降序，我們可以使用 '-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	將字符串轉換為大寫	{{ expression
lowercase	將字符串轉換為小寫	{{ expression
currency	將數字格式化為貨幣	{{ expression
filter	從數組中選擇子集項目	{{ array
orderBy	按表達式對數組進行排序	{{ array

Credits: Image by storyset