Filter AngularJS
Filter dapat ditambahkan di AngularJS untuk memformat data.
Filter AngularJS
AngularJS menyediakan filter untuk mengubah data:
currencyMemformat angka ke format mata uang.dateFormat tanggal ke format tertentu.filterPilih subset item dari array.jsonMemformat objek ke string JSON.limitToMembatasi array/string, menjadi sejumlah elemen/karakter tertentu.lowercaseMemformat string menjadi huruf kecil.numberMemformat angka menjadi string.orderByMemesan array dengan ekspresi.uppercaseMemformat string menjadi huruf besar.
Menambahkan Filter ke Ekspresi
Filter dapat ditambahkan ke ekspresi dengan menggunakan karakter pipa |, diikuti dengan filter.
Format uppercasefilter string ke huruf besar:
Contoh
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | uppercase }}</p>
</div>
Format lowercasefilter string ke huruf kecil:
Contoh
<div ng-app="myApp" ng-controller="personCtrl">
<p>The name is {{ lastName | lowercase }}</p>
</div>
Menambahkan Filter ke Arahan
Filter ditambahkan ke arahan, seperti ng-repeat, dengan menggunakan karakter pipa
|, diikuti oleh filter:
Contoh
Filter orderBymengurutkan array:
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
</div>
Filter mata uang
Filter currencymemformat angka sebagai mata uang:
Contoh
<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>
Baca lebih lanjut tentang filter mata uang di Referensi Filter mata uang AngularJS kami
Filter Filter
Filter filtermemilih subset dari array.
Filter filterhanya dapat digunakan pada array, dan mengembalikan array yang hanya berisi item yang cocok.
Contoh
Kembalikan nama-nama yang mengandung huruf "i":
<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
<li ng-repeat="x in names |
filter : 'i'">
{{ x }}
</li>
</ul>
</div>
Baca lebih lanjut tentang filter filter di Referensi Filter filter AngularJS kami
Filter Array Berdasarkan Input Pengguna
Dengan menetapkan ng-modelarahan pada bidang input, kita dapat menggunakan nilai bidang input sebagai ekspresi dalam filter.
Ketik huruf di kolom input, dan daftar akan menyusut/bertambah tergantung pada kecocokannya:
- Jani
- Carl
- Margareth
- Hege
- joe
- Gustav
- Birgit
- Maria
- Kai
Contoh
<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names | filter : test">
{{ x }}
</li>
</ul>
</div>
Urutkan Array Berdasarkan Input Pengguna
Klik header tabel untuk mengubah urutan pengurutan::
| Nama | Negara |
|---|---|
| Jani | Norway |
| Carl | Swedia |
| Margareth | Inggris |
| Hege | Norway |
| joe | Denmark |
| Gustav | Swedia |
| Birgit | Denmark |
| Maria | Inggris |
| Kai | Norway |
Dengan menambahkan ng-clickdirektif pada header tabel, kita dapat menjalankan fungsi yang mengubah urutan pengurutan array:
Contoh
<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
<tr>
<th ng-click="orderByMe('name')">Name</th>
<th ng-click="orderByMe('country')">Country</th>
</tr>
<tr
ng-repeat="x in names | orderBy:myOrderBy">
<td>{{x.name}}</td>
<td>{{x.country}}</td>
</tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl',
function($scope) {
$scope.names = [
{name:'Jani',country:'Norway'},
{name:'Carl',country:'Sweden'},
{name:'Margareth',country:'England'},
{name:'Hege',country:'Norway'},
{name:'Joe',country:'Denmark'},
{name:'Gustav',country:'Sweden'},
{name:'Birgit',country:'Denmark'},
{name:'Mary',country:'England'},
{name:'Kai',country:'Norway'}
];
$scope.orderByMe = function(x) {
$scope.myOrderBy
= x;
}
});
</script>
Filter Kustom
Anda dapat membuat filter sendiri dengan mendaftarkan fungsi pabrik filter baru dengan modul Anda:
Contoh
Buat filter khusus yang disebut "myFormat":
<ul ng-app="myApp" ng-controller="namesCtrl">
<li ng-repeat="x
in names">
{{x |
myFormat}}
</li>
</ul>
<script>
var app =
angular.module('myApp', []);
app.filter('myFormat',
function() {
return function(x) {
var i, c, txt = "";
for (i = 0; i <
x.length; i++) {
c = x[i];
if (i % 2 == 0) {
c = c.toUpperCase();
}
txt
+= c;
}
return txt;
};
});
app.controller('namesCtrl', function($scope)
{
$scope.names = ['Jani', 'Carl', 'Margareth', 'Hege',
'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
Filter myFormatakan memformat setiap karakter lain menjadi huruf besar.