Filter AngularJS & Filter Kustom AngularJS dengan Contoh

Oleh: James Hartman James Hartman
Hours Updated

Apa itu Filter di AngularJS?

A Filter di AngularJS membantu memformat nilai ekspresi untuk ditampilkan kepada pengguna tanpa mengubah format aslinya. Misalnya, jika Anda ingin string menggunakan huruf kecil atau besar, Anda dapat melakukannya menggunakan filter. Ada filter bawaan seperti 'huruf kecil', 'huruf besar', yang dapat mengambil keluaran huruf kecil dan huruf besar.

Filter Kustom AngularJS

Terkadang filter bawaan di Angular tidak dapat memenuhi kebutuhan atau persyaratan untuk memfilter keluaran. Dalam kasus seperti itu, filter kustom AngularJS dapat dibuat, yang dapat meneruskan output dengan cara yang diperlukan.

Demikian pula untuk angka, Anda dapat menggunakan filter lain. Selama tutorial ini, kita akan melihat berbagai filter bawaan standar yang tersedia di Angular.

Cara Membuat Filter Khusus di AngularJS

Dalam contoh filter kustom AngularJS di bawah ini, kita akan meneruskan string ke tampilan dari pengontrol melalui objek cakupan, tetapi kita tidak ingin string tersebut ditampilkan apa adanya.

Kami ingin memastikan bahwa setiap kali kami menampilkan string, kami akan meneruskan filter khusus AngularJS, yang akan menambahkan string lain dan menampilkan string yang sudah selesai kepada pengguna.

Buat Filter Khusus di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita melewatkan string “Angular” dalam variabel anggota yang disebut tutorial dan melampirkannya ke objek lingkup.
  2. Angular menyediakan layanan filter yang dapat digunakan untuk membuat filter khusus kami. 'Demofilter' adalah nama yang diberikan untuk filter kami.
  3. Ini adalah cara standar untuk mendefinisikan filter khusus di AngularJS saat suatu fungsi dikembalikan. Fungsi inilah yang berisi kode khusus untuk membuat filter khusus. Dalam fungsi kami, kami mengambil string "Angular" yang diteruskan dari tampilan kami ke filter dan menambahkan string "Tutorial" ke dalamnya.
  4. Kami menggunakan Demofilter pada variabel anggota kami yang diteruskan dari pengontrol ke tampilan.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Buat Filter Khusus di AngularJS

Dari keluarannya,

  • Dapat dilihat bahwa filter khusus kami telah diterapkan dan
  • Kata 'Tutorial' telah ditambahkan di akhir string, yang diteruskan dalam variabel anggota tutorial.

ARTIKEL TERKAIT

Filter Huruf Kecil di AngularJS

Filter ini mengambil keluaran string dan memformat string serta menampilkan semua karakter dalam string sebagai huruf kecil.

Mari kita lihat contoh filter AngularJS dengan opsi AngularJS ke huruf kecil.

Dalam contoh di bawah ini, kita akan menggunakan pengontrol untuk mengirim string ke tampilan melalui objek cakupan. Kami kemudian akan menggunakan filter dalam tampilan untuk mengubah string menjadi huruf kecil.

Filter Huruf Kecil di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita melewatkan sebuah string, yang merupakan kombinasi karakter huruf kecil dan huruf besar dalam variabel anggota yang disebut “tutorialName” dan melampirkannya ke objek cakupan. Nilai string yang diteruskan adalah “AngularJS”.
  2. Kami menggunakan variabel anggota “tutorialName” dan meletakkan simbol filter (|) yang berarti output perlu dimodifikasi dengan menggunakan filter. Kami kemudian menggunakan kata kunci huruf kecil untuk mengatakan menggunakan filter bawaan untuk menampilkan seluruh string dalam huruf kecil.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Filter Huruf Kecil di AngularJS

Dari keluaran

  • Terlihat bahwa string “AngularJS” yang diteruskan pada variabel tutorialName yang merupakan kombinasi karakter huruf kecil dan huruf besar telah dieksekusi.
  • Setelah dieksekusi, hasil akhir dalam huruf kecil seperti yang ditunjukkan di atas.

Filter Huruf Besar di AngularJS

Filter ini mirip dengan filter huruf kecil; perbedaannya adalah mengambil keluaran string dan memformat string dan menampilkan semua karakter dalam string sebagai huruf besar.

Mari kita lihat contoh filter huruf kapital AngularJS dengan opsi huruf kecil.

Dalam contoh penggunaan huruf besar AngularJS di bawah ini, kita akan menggunakan pengontrol untuk mengirim string ke tampilan melalui objek cakupan. Kami kemudian akan menggunakan filter dalam tampilan untuk mengubah string menjadi huruf besar.

Filter Huruf Besar di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

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

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita meneruskan string yang merupakan kombinasi karakter huruf kecil dan besar “Angular JS” dalam variabel anggota yang disebut “tutorialName” dan melampirkannya ke objek cakupan.
  2. Kami menggunakan variabel anggota “tutorialName” dan meletakkan simbol filter (|), yang berarti output perlu dimodifikasi dengan menggunakan filter. Kami kemudian menggunakan kata kunci huruf besar untuk mengatakan menggunakan filter bawaan untuk menampilkan seluruh string dalam huruf besar.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Filter Huruf Besar di AngularJS

Dari keluarannya,

  • Terlihat bahwa string yang dilewatkan pada variabel tutorialName yang merupakan kombinasi karakter huruf kecil dan huruf besar telah dikeluarkan dalam huruf besar semua.

Filter Angka di AngularJS

Filter ini memformat angka dan dapat menerapkan batasan koma desimal untuk suatu angka.

Mari kita lihat contoh filter AngularJS dengan opsi nomor.

Pada contoh di bawah ini,

Kami ingin menunjukkan bagaimana kami dapat menggunakan filter angka untuk memformat angka agar ditampilkan dengan batasan 2 tempat desimal.

Kami akan menggunakan pengontrol untuk mengirim nomor ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter angka.

Filter Angka di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita meneruskan angka dengan jumlah desimal lebih banyak ke dalam variabel anggota yang disebut tutorialID dan melampirkannya ke objek cakupan.
  2. Kami menggunakan variabel anggota tutorialID dan menempatkan simbol filter (|) bersama dengan filter nomor. Sekarang di angka:2, keduanya menunjukkan bahwa filter harus membatasi jumlah tempat desimal menjadi 2.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Filter Angka di AngularJS

Dari keluarannya,

  • Terlihat bahwa angka yang diteruskan pada variabel tutorialID yang memiliki jumlah koma desimal yang besar telah dibatasi hingga 2 tempat desimal karena jumlah: 2 filter yang diterapkan.

Filter Mata Uang di AngularJS

Filter ini memformat filter mata uang menjadi angka.

Misalkan jika Anda ingin menampilkan angka dengan mata uang seperti $, maka filter ini dapat digunakan.

Dalam contoh di bawah ini, kita akan menggunakan pengontrol untuk mengirim nomor ke tampilan melalui objek lingkup. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter saat ini.

Filter Mata Uang di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita meneruskan nomor dalam variabel anggota yang disebut tutorialprice dan melampirkannya ke objek lingkup.
  2. Kami menggunakan variabel anggota tutorialprice dan menempatkan simbol filter (|) bersama dengan filter mata uang. Perhatikan bahwa mata uang yang diterapkan bergantung pada pengaturan bahasa yang diterapkan pada mesin.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Filter Mata Uang di AngularJS

Dari keluaran

  • Terlihat simbol mata uang telah ditambahkan ke angka yang diteruskan pada variabel tutorialprice.
  • Dalam kasus kami, karena pengaturan bahasanya adalah Inggris (Amerika Serikat), simbol $ dimasukkan sebagai mata uang.

Filter JSON di AngularJS

Filter ini memformat a JSON menyukai input dan menerapkan filter AngularJS JSON untuk memberikan output dalam JSON.

Dalam contoh di bawah ini, kita akan menggunakan pengontrol untuk mengirim objek tipe JSON ke tampilan melalui objek cakupan. Kami kemudian akan menggunakan filter dalam tampilan untuk menerapkan filter JSON.

Filter JSON di AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Penjelasan Kode

  1. Di sini kita meneruskan nomor dalam variabel anggota yang disebut “tutorial” dan melampirkannya ke objek cakupan. Variabel anggota ini berisi string tipe JSON dari ID Tutorial:12, dan NamaTutorial:”Angular”.
  2. Kami menggunakan tutorial variabel anggota dan menempatkan simbol filter (|) bersama dengan filter JSON.

Jika kode berhasil dieksekusi, Output berikut akan ditampilkan saat Anda menjalankan kode di peramban.

Keluaran:

Filter JSON di AngularJS

Dari keluarannya,

  • Terlihat bahwa JSON seperti string diurai dan ditampilkan sebagai objek JSON yang sesuai di browser.

Ringkasan

  • Filter digunakan untuk mengubah cara output ditampilkan kepada pengguna.
  • Angular menyediakan filter bawaan seperti filter huruf kecil dan huruf besar untuk mengubah output string menjadi huruf kecil dan huruf besar.
  • Ada juga ketentuan untuk mengubah cara menampilkan angka dengan menggunakan filter angka dengan menentukan jumlah koma desimal yang akan ditampilkan pada angka tersebut.
  • Seseorang juga dapat menggunakan filter mata uang untuk menambahkan simbol mata uang ke nomor mana pun.
  • Jika ada persyaratan untuk memiliki keluaran spesifik JSON, sudut juga menyediakan filter JSON untuk memfilter string seperti JSON ke dalam format JSON.
  • Jika ada persyaratan yang tidak dipenuhi oleh salah satu filter yang ditentukan dalam sudut, Anda dapat membuat filter khusus dan menambahkan kode khusus untuk menentukan jenis keluaran yang Anda inginkan dari filter.