AngularJS - Penapis: Panduan Kawan Anda untuk Transformasi Data

Hai sana, super bintang pengkomputeran masa depan! ? Hari ini, kita akan melangkah ke dalam dunia menarik penapis AngularJS. Jangan khawatir jika anda baru dalam pengkomputeran - saya akan disini bersama anda, menjelaskan segala-galanya secara langkah demi langkah. Pada akhir panduan ini, anda akan menapis data seperti seorang pro!

Apa Itu Penapis Dalam AngularJS?

Sebelum kita mendalamkan, mari kita memahami apa penapis itu. Bayangkan anda memiliki tongkat ajaib yang dapat secara instan mentransform data. Itu sebenarnya apa yang penapis lakukan dalam AngularJS! Mereka mengambil data anda dan menampilkan nya dalam format yang berbeda tanpa mengubah data asli. Keren, kan?

Sekarang, mari kita jelajahi beberapa penapis yang paling umum digunakan dalam AngularJS.

Penapis Uppercase: Mengeksploitasi Kebesaran

Apa Yang Dilakukan

Penapis uppercase melakukan apa yang namanya - itu mengkonversi semua karakter dalam string menjadi huruf besar.

Cara Menggunakan

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

Output

HELLO, WORLD!

Penjelasan

Dalam contoh ini, kita mulai dengan string huruf kecil "hello, world!". Simbol | seperti pipa ajaib yang mengirimkan teks kita melalui penapis uppercase. Hasilnya? Sebuah "HELLO, WORLD!" yang keras dan bangga.

Penapis Lowercase: Menyimpan Itu Rendah

Apa Yang Dilakukan

Seperti yang anda mungkin猜测, penapis lowercase melakukan kebalikan dari uppercase - itu mengkonversi semua karakter menjadi huruf kecil.

Cara Menggunakan

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

Output

shout out to angularjs!

Penjelasan

Di sini, kita mulai dengan string semua huruf besar. Penapis lowercase menurunkan volume, memberikan kita "shout out to angularjs!" yang lebih halus.

Penapis Currency: Tunjukkan Uang Saya!

Apa Yang Dilakukan

Penapis currency memformatkan sebuah nomor sebagai mata uang. Secara default, itu menggunakan tanda dolar, tetapi anda dapat menyesuaikan nya.

Cara Menggunakan

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

Output

$9.99
€9.99

Penjelasan

Dalam baris pertama, kita formatkan 9.99 sebagai dolar AS. Dalam baris kedua, kita meminta filter untuk menggunakan simbol Euro saja. Magic, kan?

Penapis Filter: Mencari Jarum di Stapel

Apa Yang Dilakukan

Penapis... filter (ya, itu sedikit membingungkan!) membantu anda mencari melalui array dan mengembalikan item yang cocok.

Cara Menggunakan

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

Output

John

Penjelasan

Di sini, kita mencari array teman kita untuk nama yang mengandung 'o'. Hanya John yang cocok, jadi dia yang satu-satunya yang ditampilkan.

Penapis OrderBy: Menata Hal-Hal dalam Urutan

Apa Yang Dilakukan

Penapis orderBy mengurutkan array berdasarkan satu atau lebih kriteria.

Cara Menggunakan

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

Output

John - 25
Mary - 28
Peter - 35

Penjelasan

Dalam contoh ini, kita mengurutkan teman kita menurut umur dalam urutan naik. Jika kita ingin urutan turun, kita dapat menggunakan '-age' saja.

Menggabungkan Semua: Contoh yang Besar

Sekarang, mari kita gabungkan beberapa penapis untuk melihat betapa kuat mereka dapat bersamaan!

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

Penjelasan

1. Kita mulai dengan array produk.
2. Kita buat field input yang terikat ke searchText menggunakan ng-model.
3. Dalam tabel kita, kita gunakan ng-repeat untuk mengulang produk kita.
4. Kita applies penapis filter untuk mencari berdasarkan searchText.
5. Kemudian kita gunakan orderBy untuk mengurutkan hasilnya menurut harga.
6. Untuk setiap produk, kita tampilkan nama dalam huruf besar dan harga dalam format mata uang.

Contoh ini menggabungkan pencarian, pengurutan, dan pemformatan semua dalam satu kesatuan!

Penutup

Selamat! Anda baru saja mengambil langkah pertama ke dalam dunia penapis AngularJS. Ingat, penapis adalah seperti stylist pribadi data anda - mereka membantu mempresentasikan informasi anda dalam cara yang paling sesuai dan menarik mungkin.

Sekiranya anda terus melanjutkan perjalanan anda dengan AngularJS, anda akan menemukan banyak lagi cara untuk menggunakan penapis untuk membuat aplikasi anda bersinar. Terus latihan, tetap bersemangat, dan terutama, bersenang-senang! Sebelum anda tahu, anda akan menjadi ahli AngularJS. ?

Penapis	Tujuan	Sintaks
uppercase	Konversi string ke huruf besar	{{ ekspresi
lowercase	Konversi string ke huruf kecil	{{ ekspresi
currency	Formatkan nomor sebagai mata uang	{{ ekspresi
filter	Pilih sub-set item dari array	{{ array
orderBy	Urutkan array berdasarkan ekspresi	{{ array

Credits: Image by storyset