AngularJS - Filters: Panduan Teman Anda ke Transformasi Data

Hai teman, bakal bintang coding! ? Hari ini, kita akan memulai perjalanan menarik ke dunia filter AngularJS. Jangan khawatir jika Anda baru saja memulai dengan pemrograman – saya akan ada disini bersama Anda, menjelaskan segala sesuatunya langkah demi langkah. Pada akhir tutorial ini, Anda akan dapat menyaring data seperti seorang pro!

apa Itu Filters di AngularJS?

Sebelum kita masuk ke detil, mari kita mengerti apa itu filter. Bayangkan Anda punya tongkat ajaib yang dapat mengubah data secara instan. Itu sebenarnya apa yang dilakukan filter di AngularJS! Mereka mengambil data Anda dan menampilkanannya dalam format yang berbeda tanpa mengubah data asli. Keren, kan?

Sekarang, mari kita jelajahi beberapa filter yang paling banyak digunakan di AngularJS.

Filter Uppercase: Mengambil Keunggulan

apa Yang Dilakukannya

Filter uppercase melakukan apa yang namanya – mengonversi semua karakter dalam string menjadi huruf besar.

Bagaimana Menggunakan Itu

<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 filter uppercase. Hasilnya? Sebuah "HELLO, WORLD!" yang keras dan bangga.

Filter Lowercase: Menyimpan Itu Rendah

apa Yang Dilakukannya

Sebagai yang Anda mungkin猜测, filter lowercase melakukan kebalikan dari uppercase – mengonversi semua karakter menjadi huruf kecil.

Bagaimana Menggunakan Itu

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

Output

shout out to angularjs!

Penjelasan

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

Filter Currency: Tunjukkan Uang Saya!

apa Yang Dilakukannya

Filter currency memformat sebuah nomor sebagai mata uang. Secara default, ia menggunakan tanda dolar, tetapi Anda dapat menyesuaikannya.

Bagaimana Menggunakan Itu

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

Output

$9.99
€9.99

Penjelasan

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

Filter Filter: Mencari Jarum di Tumpukan

apa Yang Dilakukannya

Filter... filter (ya, itu agak membingungkan!) membantu Anda mencari melalui array dan mengembalikan item yang cocok.

Bagaimana Menggunakan Itu

<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 friends untuk nama yang mengandung 'o'. Hanya John yang cocok, jadi dia yang satu-satunya yang ditampilkan.

Filter OrderBy: Menata Hal-hal dalam Urutan

apa Yang Dilakukannya

Filter orderBy mensortir array berdasarkan satu atau lebih kriteria.

Bagaimana Menggunakan Itu

<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 mensortir friends berdasarkan umur dalam urutan naik. Jika kita ingin urutan turun, kita dapat menggunakan '-age' saja.

Menggabungkan Semua: Contoh Besar

Sekarang, mari kita gabungkan beberapa filter untuk melihat betapa kuat mereka dapat bersama-sama!

<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.
4. Kita terapkan filter filter untuk mencari berdasarkan searchText.
5. Kemudian kita gunakan orderBy untuk mensortir hasilnya berdasarkan harga.
6. Untuk setiap produk, kita menampilkan nama dalam huruf besar dan harga dalam format mata uang.

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

Menutup

Selamat! Anda telah mengambil langkah pertama ke dunia filter AngularJS. Ingat, filter adalah seperti stylist pribadi data Anda – mereka membantu mempresentasikan informasi Anda dalam cara yang paling sesuai dan menarik.

Sekiranya Anda terus mengembangkan pengetahuan Anda tentang AngularJS, Anda akan menemukan banyak cara lain untuk menggunakan filter untuk membuat aplikasi Anda bersinar. Terus latih, tetap curiga, dan terutama, bersenang-senang! Sebelum Anda tahu, Anda akan menciptakan aplikasi web yang menakjubkan yang akan mempesona siapa saja.

Selamat coding, bakal master AngularJS! ?

Filter	Tujuan	Sintaks
uppercase	Mengonversi string ke huruf besar	{{ ekspresi
lowercase	Mengonversi string ke huruf kecil	{{ ekspresi
currency	Memformat nomor sebagai mata uang	{{ ekspresi
filter	Memilih subseksi item dari array	{{ array
orderBy	Mengurutkan array berdasarkan ekspresi	{{ array

Credits: Image by storyset