Filter AngularJS & Filter Kustom AngularJS dengan Contoh

⚡ Ringkasan Cerdas

Filter di AngularJS memformat nilai suatu ekspresi untuk ditampilkan tanpa mengubah data yang mendasarinya. Filter bawaan mencakup huruf besar/kecil, angka, mata uang, dan JSON, sementara filter kustom menangani aturan pemformatan apa pun yang belum disediakan oleh framework.

🧾 Prinsip Inti: Filter hanya mengubah apa yang ditampilkan oleh tampilan; nilai yang tersimpan pada objek cakupan tidak pernah dimodifikasi.
➖ Sintaks Pipa: Garis vertikal memisahkan ekspresi dari nama filter, dan titik dua meneruskan argumen ke ekspresi tersebut.
🔤 Filter Huruf Besar/Kecil: Penggunaan huruf kecil dan besar mengubah string untuk ditampilkan, dan tidak ada filter kapitalisasi di AngularJS.
🔢 Angka dan Mata Uang: Jumlah angka membatasi jumlah tempat desimal, sementara mata uang menambahkan simbol yang ditentukan oleh wilayah setempat ke nilai tersebut.
️ Filter Kustom: Mendaftarkan sebuah factory yang mengembalikan sebuah fungsi akan menciptakan filter yang dapat digunakan kembali di seluruh modul.
⚡ Kemurnian Penting: Sebuah filter harus menghasilkan output yang sama untuk input yang sama, karena AngularJS menyimpan hasil dalam cache dan melewatkan pengulangan filter murni.

Baca Selengkapnya

Apa itu Filter di AngularJS?

A Filter di AngularJS Fungsi ini membantu memformat nilai suatu ekspresi untuk ditampilkan kepada pengguna tanpa mengubah nilai aslinya. Misalnya, jika Anda ingin sebuah string ditampilkan dalam huruf kecil atau huruf besar, Anda dapat melakukannya menggunakan filter. Filter bawaan seperti 'huruf kecil' dan 'huruf besar' akan mengembalikan string dalam format yang diminta, dan terdapat filter lebih lanjut untuk angka, mata uang, dan JSON.

⚠️ Catatan versi: AngularJS (cabang 1.x) telah mencapai akhir masa pakainya pada 31 Desember 2021 dan tidak menerima patch keamanan lebih lanjut. Semua hal di bawah ini tetap akurat untuk memelihara aplikasi AngularJS yang ada; di Angular modern, peran yang sama diisi oleh sebuah pipe.

Filter diterapkan pada tampilan dengan karakter pipa. Sebelum melihat masing-masing filter, ada baiknya mengetahui mengapa Anda perlu menulis filter sendiri.

Filter Huruf Kecil di AngularJS

Filter ini mengambil sebuah string dan menampilkan semua karakternya dalam huruf kecil.

Di bawah ini, sebuah controller mengirimkan string ke view melalui objek scope, dan sebuah filter mengubahnya menjadi huruf kecil.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
</head>
<body>
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>

<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | lowercase}}
</div>

<script>
var app = angular.module('DemoApp', []);

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>
</body>
</html>

Code Penjelasan

String "Angular JS" dengan huruf besar dan kecil ditempatkan dalam variabel anggota yang disebut tutorialName pada objek cakupan.
Simbol filter (|) menandai output untuk transformasi, dan lowercase Kata kunci ini menerapkan filter bawaan yang mengubah seluruh string menjadi huruf kecil.

⚠️ Koreksi diterapkan pada setiap daftar. Keenam contoh asli tersebut memiliki tiga kekurangan yang sama. chrset="UTF 8" bukan atribut atau pengkodean yang valid, dan sekarang charset="UTF-8". angular-route.js sarat sebelum angular.min.js, yang menimbulkan kesalahan modul, dan tidak pernah digunakan — telah dihapus, begitu pula referensi jQuery yang tidak digunakan. Teks tersebut juga menyatakan nilainya adalah “AngularJS” sementara kode menetapkan “Angular JS”; teks sekarang cocok.

Keluaran:

String dengan huruf besar dan kecil akan diubah seluruhnya menjadi huruf kecil. Transformasi sebaliknya bekerja dengan cara yang sama.

Filter Huruf Besar di AngularJS

Filter ini adalah kebalikan dari filter huruf kecil, yang menampilkan setiap karakter dalam huruf besar.

Di bawah ini, sebuah controller mengirimkan string ke view melalui objek scope, dan sebuah filter mengubahnya menjadi huruf besar.

<!-- The head and library references are unchanged from the previous example -->
<div ng-app="DemoApp" ng-controller="DemoController">
Tutorial Name : <input type="text" ng-model="tutorialName"><br>
This tutorial is {{tutorialName | uppercase}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialName = "Angular JS";
}]);
</script>

Code Penjelasan

String "Angular JS" dengan huruf besar dan kecil ditempatkan di tutorialName dan terlampir pada objek cakupan.
Simbol filter (|) diikuti oleh uppercase kata kunci, sehingga filter bawaan akan mengubah seluruh string menjadi huruf besar.

⚠️ Koreksi: Versi aslinya memperkenalkan bagian ini sebagai "contoh filter kapitalisasi AngularJS dengan opsi huruf kecil", yang salah dua kali lipat. Bagian ini mendemonstrasikan filter huruf besar, dan AngularJS sama sekali tidak memiliki filter kapitalisasi — mengkapitalisasi hanya huruf pertama membutuhkan filter khusus, yang akan ditunjukkan di bagian selanjutnya cara membuatnya.

Keluaran:

Filter kasus tidak menerima argumen. Filter berikutnya menunjukkan bagaimana titik dua meneruskan parameter ke filter.

Filter Angka di AngularJS

Filter ini memformat angka dan dapat membatasi jumlah angka desimal yang ditampilkan.

Contoh di bawah ini menggunakan filter angka untuk menampilkan nilai yang dibatasi hingga dua angka desimal. Sebuah controller mengirimkan angka ke view melalui objek scope, dan filter diterapkan di view.

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorialID is {{tutorialID | number:2}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialID = 3.565656;
}]);
</script>

Code Penjelasan

Angka dengan banyak angka desimal ditempatkan dalam variabel anggota yang disebut tutorialID dan terlampir pada objek cakupan.
Simbol filter (|) diikuti oleh number:2Tanda titik dua meneruskan argumen, dan angka 2 menetapkan dua tempat desimal. Nilai dibulatkan untuk ditampilkan, sehingga 3.565656 muncul sebagai 3.57 sementara cakupan tetap mempertahankan angka lengkapnya.

Keluaran:

Memformat angka biasa seringkali tidak cukup ketika nilai tersebut mewakili uang, yang akan ditangani oleh filter berikutnya.

Filter Mata Uang di AngularJS

Filter ini memformat angka sebagai nilai mata uang, dengan menambahkan simbol mata uang seperti $ di depannya.

Pada contoh di bawah ini, controller mengirimkan angka ke view melalui objek scope, dan filter mata uang diterapkan di view.

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial Price is {{tutorialprice | currency}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorialprice = 20.56;
}]);
</script>

Code Penjelasan

Sebuah angka ditempatkan dalam variabel anggota yang disebut tutorialprice dan terlampir pada objek cakupan.
Simbol filter (|) diikuti oleh currency menyaring.

⚠️ Koreksi: Pernyataan aslinya menyebutkan bahwa mata uang "bergantung pada pengaturan bahasa yang diterapkan pada mesin". Itu tidak benar. AngularJS menggunakan lokal yang disertakan dengan pustaka, yaitu en-US secara default, sehingga simbolnya adalah $ terlepas dari sistem operasinya. Muat yang sesuai. angular-locale_*.js file, atau berikan simbolnya secara langsung: {{tutorialprice | currency:"£"}}.

Keluaran:

String dan angka adalah nilai sederhana. Filter bawaan terakhir menangani objek secara keseluruhan.

Filter JSON di AngularJS

Filter ini mengubah objek menjadi format yang sesuai. JSON string, yang berguna untuk memeriksa data cakupan selama pengembangan.

Pada contoh di bawah ini, sebuah controller mengirimkan sebuah objek ke view melalui objek scope, dan filter JSON diterapkan di view tersebut.

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | json}}
</div>

<script>
app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = { TutorialID: 12, tutorialName: "Angular" };
}]);
</script>

Code Penjelasan

Sebuah objek yang memegang TutorialID: 12 ke tutorialName: "Angular" ditempatkan dalam variabel anggota yang disebut tutorial dan terlampir pada objek cakupan.
Simbol filter (|) diikuti oleh json filter, yang mengubah objek menjadi teks JSON berindentasi.

⚠️ Koreksi: Deskripsi aslinya menyebutkan nilai ini sebagai "angka" dan "string bertipe JSON". Padahal bukan keduanya. Ini adalah sebuah JavaObjek skrip, dan filter json adalah yang mengubahnya menjadi string JSON untuk ditampilkan.

Keluaran:

Kelima filter ini mencakup kasus-kasus umum. Jika tidak ada yang menghasilkan output yang Anda butuhkan, Anda dapat membuat filter sendiri.

Filter Kustom AngularJS

Terkadang filter bawaan di AngularJS tidak dapat memenuhi persyaratan untuk memformat output. Dalam kasus seperti itu, filter kustom AngularJS dapat dibuat, yang mengembalikan output dengan cara yang dibutuhkan.

Filter kustom didaftarkan pada sebuah modul dan kemudian berperilaku persis seperti filter bawaan. Bagian di bawah ini membahas filter standar terlebih dahulu, karena filter kustom menggunakan sintaks pipa yang sama, kemudian menunjukkan cara membuatnya.

Cara Membuat Filter Khusus di AngularJS

Pada contoh di bawah ini, sebuah string diteruskan dari pengawas ke tampilan melalui objek cakupan, tetapi seharusnya tidak ditampilkan apa adanya. Filter khusus di AngularJS Menambahkan string lain dan menampilkan hasil yang lengkap.

<!-- The head and library references are unchanged -->
<div ng-app="DemoApp" ng-controller="DemoController">
This tutorial is {{tutorial | Demofilter}}
</div>

<script>
var app = angular.module('DemoApp', []);

// The factory runs once; the function it returns runs on every value
app.filter('Demofilter', function() {
  return function(input) {
    return input + " Tutorial";
  };
});

app.controller('DemoController', ['$scope', function($scope) {
  $scope.tutorial = "Angular";
}]);
</script>

Code Penjelasan

String “Angular” ditempatkan dalam variabel anggota yang disebut tutorial dan terlampir pada objek cakupan.
AngularJS menyediakan filter Metode pendaftaran yang digunakan untuk membuat filter kustom. 'Demofilter' adalah nama yang diberikan kepadanya, dan nama itulah yang dirujuk oleh tampilan tersebut.
Ini adalah bentuk standar dari filter kustom: fungsi yang terdaftar adalah sebuah pabrik Mengembalikan fungsi yang melakukan pekerjaan tersebut. Fungsi tersebut menerima nilai yang difilter sebagai parameter pertamanya dan mengembalikan hasilnya — di sini, input dengan tambahan "Tutorial".
Filter diterapkan pada tampilan menggunakan sintaks pipa yang sama seperti filter bawaan lainnya.

💡 olymp trade indonesiaTip: Nama filter biasanya ditulis dengan huruf kecil atau camelCase. 'Demofilter' bisa digunakan, tetapi nama seperti appendTutorial Lebih mudah dibaca dan menghindari bentrok dengan nama bawaan.

Keluaran:

Kata 'Tutorial' telah ditambahkan ke string yang diteruskan dalam tutorial variabel. Filter ini selalu menambahkan teks yang sama, yang dapat dikonfigurasi di bagian selanjutnya.

Cara Meneruskan Argumen ke Filter Kustom

Filter di atas menetapkan teks yang akan ditambahkan secara permanen, sehingga hanya dapat melakukan satu hal. Filter bawaan seperti number:2 Menerima argumen setelah titik dua, dan filter kustom juga bisa: setiap parameter setelah parameter pertama dipetakan ke argumen yang dipisahkan oleh titik dua di tampilan.

Ada tiga langkah yang terlibat: menambahkan parameter setelahnya. input Dalam fungsi yang dikembalikan, berikan nilai default untuk hal-hal opsional agar filter tetap berfungsi meskipun argumen dihilangkan, kemudian teruskan argumen dalam tampilan yang dipisahkan oleh titik dua.

app.filter('appendText', function() {
  return function(input, suffix, separator) {
    if (!input) { return input; }        // guard against undefined
    separator = typeof separator === 'undefined' ? ' ' : separator;
    return input + separator + suffix;
  };
});

Tampilan tersebut kemudian berbunyi sebagai berikut, di mana “Tutorial” menjadi suffix dan tanda hubung menjadi separator.

{{tutorial | appendText:"Tutorial"}}          // Angular Tutorial
{{tutorial | appendText:"Tutorial":" - "}}    // Angular - Tutorial

Dua detail mudah terlewatkan. Argumen adalah ekspresi AngularJS, jadi string literal harus diberi tanda kutip, sedangkan kata yang tidak diberi tanda kutip dibaca sebagai properti cakupan. Filter juga berantai, masing-masing menerima output dari filter sebelumnya: {{tutorial | appendText:"Tutorial" | uppercase}}.

⚠️ Peringatan: Jaga agar filter tetap murni — menghasilkan output yang sama untuk input yang sama, tanpa perubahan eksternal. AngularJS menyimpan filter murni dalam cache dan menjalankannya kembali hanya ketika input berubah. Filter yang membaca jam atau memodifikasi layanan harus ditandai sebagai filter yang tidak dapat diubah. $stateful, yang menonaktifkan caching tersebut dan menjalankan filter pada setiap siklus digest, penyebab umum halaman yang lambat.

Filter tidak terbatas pada template. Filter yang sama dapat dipanggil dari JavaSkrip, seperti yang akan ditunjukkan selanjutnya.

Cara Menggunakan Filter di Controller dengan Layanan $filter

Menerapkan filter di tampilan adalah hal yang umum, tetapi nilai yang telah diubah terkadang dibutuhkan di dalam controller, misalnya sebelum mengirim data ke server. AngularJS mengekspos setiap filter yang terdaftar, baik bawaan maupun kustom, melalui $filter Layanan. Suntikkan, panggil dengan nama filter untuk mengambil fungsi filter, lalu panggil fungsi tersebut dengan nilai dan argumen apa pun.

app.controller('DemoController', ['$scope', '$filter',
function($scope, $filter) {
  $scope.tutorial = "Angular";

  // Built-in filters, called from JavaScript
  $scope.shouted = $filter('uppercase')($scope.tutorial);      // "ANGULAR"
  $scope.price   = $filter('currency')(20.56);                 // "$20.56"

  // A custom filter works exactly the same way
  $scope.full    = $filter('appendText')($scope.tutorial, "Tutorial");
}]);

Bentuk yang lebih singkat juga ada: memasukkan nama filter diikuti dengan Filter, Seperti uppercaseFilter, menyediakan fungsi filter secara langsung dan dapat dipanggil segera. Kedua bentuk tersebut mengarah ke fungsi yang sama, jadi pilihannya bersifat gaya.

Dua kegunaan muncul berulang kali. Yang pertama adalah mempersiapkan muatan data: tanggal biasanya harus sampai ke API dalam pola tetap, dan $filter('date')(value, 'yyyy-MM-dd') menghasilkan nilai tersebut tanpa menyentuh nilai yang terikat pada formulir. Yang kedua adalah mempersempit koleksi sekali di dalam controller, daripada membiarkannya orderBy di ng-ulangi ekspresi di mana ia dijalankan ulang pada setiap pencernaan.

Filter yang disuntikkan dengan cara ini masih terdaftar di modul, jadi filter kustom harus dideklarasikan dengan app.filter sebelum pengontrol mana pun bertanya $filter untuk itu. Jika tidak, AngularJS akan menampilkan kesalahan penyedia yang tidak dikenal.

Memanggil filter di JavaScript berbeda dari template dalam satu hal penting: hasilnya dihitung sekali dan disimpan dalam scope, bukan dihitung ulang pada setiap digest. Hal ini menjadikannya pilihan yang lebih cepat untuk nilai yang jarang berubah, dan pilihan yang salah untuk nilai yang harus sering berubah. tracmasukan pengguna k.

Pertanyaan Umum Demo Slot

Tidak. AngularJS hanya menyediakan huruf kecil dan huruf besar. Mengubah huruf pertama setiap kata menjadi huruf besar memerlukan filter khusus yang memisahkan string dan membangunnya kembali, atau aturan CSS text-transform jika perubahannya murni visual.

Filter tersebut terdaftar pada modul yang berbeda dari modul yang diinisialisasi oleh ng-app, atau skrip yang mendefinisikannya berjalan sebelum AngularJS dimuat. Daftarkan filter pada modul yang sama dan muat pustaka terlebih dahulu.

Ya. Piping koleksi di dalam ng-ulangi Filter ini memfilter atau mengurutkan item sebelum ditampilkan. Filter menerima seluruh array dan harus mengembalikan array.

Ya. AI Asisten menghasilkan pabrik, fungsi yang dikembalikan, dan sintaks tampilan dari deskripsi sederhana aturan pemformatan. Periksa apakah filter yang dihasilkan melindungi dari input yang tidak terdefinisi.

Alat AI menulis ulang pabrik sebagai kelas yang mengimplementasikan PipeTransform dan memindahkan setiap parameter tambahan ke dalam metode transform. RevLihat setiap filter $stateful secara manual, karena pipe yang tidak murni harus dideklarasikan secara eksplisit.

Filter AngularJS & Filter Kustom AngularJS dengan Contoh

Apa itu Filter di AngularJS?

Filter Huruf Kecil di AngularJS

Code Penjelasan

Filter Huruf Besar di AngularJS

Code Penjelasan

Filter Angka di AngularJS

Code Penjelasan

Filter Mata Uang di AngularJS

Code Penjelasan

Filter JSON di AngularJS

Code Penjelasan

Filter Kustom AngularJS

Cara Membuat Filter Khusus di AngularJS

Code Penjelasan

Cara Meneruskan Argumen ke Filter Kustom

Cara Menggunakan Filter di Controller dengan Layanan $filter

Pertanyaan Umum Demo Slot

Ringkaslah postingan ini dengan:

Mendaftar untuk buletin