Table of Content
Introduction
Dengan menggunakan filter, kita dapat melakukan format pada nilai expression yg akan ditampilkan di layar. Filter juga dapat diimplementasikan pada template dan controller. AngularJS menyediakan beberapa koleksi filter yg siap pakai (built-in) seperti currency, uppercase, lowercase, dan lain-lain.
Contoh Penggunaan Filter Pada Program
Format Huruf
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.isi = 'lorem ipsum'
})
</script>
</head>
<body ng-app="belajar" ng-controller="kontroller">
<h1>Latihan AngularJS</h1>
<p>{{ isi | uppercase }}</p>
<p>{{ isi | lowercase }}</p>
</body>
</html>Format Mata Uang
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.isi = 1000
})
</script>
</head>
<body ng-app="belajar" ng-controller="kontroller">
<h1>Latihan AngularJS</h1>
<p>{{ isi | currency }}</p>
</body>
</html>Filter Array
Lebih jauh tentang filter ini, kita akan membuat program dengan memanfaatkan fasilitas filter untuk menampilkan item yg memiliki karakter yg sama didalamnya.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.kendaraan = [
{tipe: 'Mobil', warna: 'Kuning'},
{tipe: 'Motor', warna: 'Merah'},
{tipe: 'Sepeda', warna: 'Putih'}
]
})
</script>
</head>
<body ng-app="belajar" ng-controller="kontroller">
<h1>Latihan AngularJS</h1>
<input type="text" ng-model="seleksi">
<p ng-repeat="kd in kendaraan | filter:seleksi | orderBy:'warna'">{{ kd.tipe }} | {{ kd.warna }}</p>
</body>
</html>Note : kita dapat menambahkan filter orderBy untuk mengurutkan data.
Filter Limit
FItur ini memungkinkan pembatasan pada data output yg akan dikeluarkan.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan Angular</title>
<script src="angular.min.js"></script>
<script>
angular.module('belajar', []).controller('kontroller', function($scope){
$scope.kendaraan = [
{tipe: 'Mobil', warna: 'Putih'},
{tipe: 'Motor', warna: 'Hijau'},
{tipe: 'Sepeda', warna: 'Putih'}
]
})
</script>
</head>
<body ng-app="belajar" ng-controller="kontroller">
<h1>Latihan AngularJS</h1>
<input type="text" ng-model="seleksi">
<p ng-repeat="kd in kendaraan | filter:seleksi | orderBy:'warna' | limitTo:2">{{ kd.tipe }} | {{ kd.warna }}</p>
</body>
</html>