Bu yazıda AngularJS ile Filitre kullanımını inceleyeceğiz. AngularJS ile 3 tip filitreleme yapılabilir.
- Biçimlendirme Filtresi (Format Filter)
- Sıralama Filitresi (Sort Filter)
- Veri Filitresi (Filter Data)
AngularJS filtreleri bildirimler(directive) ile kullanılabileceği gibi bağlantı ifadeleri(binding expression) ile de kullanılabilir.
Filtreyi uygulamak için HTML içindeki ifadenin yanına ( | ) sembolü ile filtrelerler eklenir.
Kural: {{ ifade | filitreAdı:parametre}}
Veri Biçimlendirmek için AngularJS Filtreleri
| Filtre | Tanım |
| lowercase | Tüm karekterleri küçük karakter olarak biçimlendirir |
| uppercase | Tüm karekterleri büyük karakter olarak biçimlendirir |
| number | Bir sayıyı metin olarak biçimlendirir. Virgül ile binde ve ondalık ayıracı dahil. |
| currency | Bir sayıyı döviz kuru olarak biçimlendirir. Varsayılan $ sembolüdür. Özel döviz kuru da tanımlanabilir. |
| date | Bir tarihi istenilen formatta metin olarak biçimlendirir. |
AngularJS Tarih Biçimleri
| Biçim | Sonuç |
| yyyy | 4 basamaklı yıl. Örn: 2007 |
| yy | 2 basamaklı yıl. Örn: 1988 => 88 |
| MMMM | January – December |
| MMM | Jan – Dec |
| MM | 01 – 12 |
| M | 1 – 12 (Sıfırsız) |
| dd | 01 – 31 |
| d | 1 – 31 (Sıfırsız) |
Angular tarih formatı dökümanı:
https://docs.angularjs.org/api/ng/filter/dateü
limitTo filitresi : kaç satır yada kaç karater gösterileceğini belirtir.
Kural: {{ ifade| limitTo : sınır: başlancıç}}
Aşağıdaki örnek bu açıklamaya ait bir uygulamadır.
SCRIPT: Daha önceki örneklerden hatırlayacağınız gibi. Yukarıdaki modelimizi controllar yapımıza bağlıyoruz. Modül, Controller ve model için gerekli olan kodları yazdık.
var app = angular
.module("persModul", [])
.controller("persController", function ($scope) {
var personeller=[
{isim:"Hayri",soyisim:"KARA",dogum:new Date(1988,7,10),maas:3000},
{isim:"Yaşar",soyisim:"DOĞAN",dogum:new Date(1988,3,30),maas:2500},
{isim:"İsmet",soyisim:"ULUÇ",dogum:new Date(1983,6,20),maas:2700},
{isim:"Ayşe",soyisim:"YURT",dogum:new Date(1968,6,15),maas:3500},
{isim:"Sunay",soyisim:"YERLİ",dogum:new Date(1998,6,10),maas:2850},
{isim:"Nazmiye",soyisim:"ÇARIKÇI",dogum:new Date(1995,4,10),maas:2000}
];
$scope.personeller = personeller;
});
HTML: Filtre uygulamak için sayfaya bir tane text nesnesi(number) ekleyip ng-modeline satirSayisi ismini verdik. Bu modeli filtre içinde limitTo özelliğinine uygulayarak personel görünümün kaç satır olacağını belirleyeceğiz.
<input type="number" step="1" ng-model="satirSayisi" max="5" min="0" />
HTML kodlarının birleştirilmiş hali;
1- ng-repeat ifadesinin içine ( | ) sembolü ile filtrenin eklendiğini ve satirSayisi modelinin parametre olarak geçirildi.
2-personel adı büyük karakter yapıldı.
3- tarih formatı gün/ay/yıl olarak düzeltildi.
4-maaş tl sembolü ve 2 ondalık basamak şeklide yapıldı.
5- maaş 2 ondalık basamak olacak şekilde sayı olarak düzenlendi.
<body ng-app="persModul">
<div ng-controller="persController">
<div>
Satır Sayısı : <input type="number" step="1" ng-model="satirSayisi" max="5" min="0" />
</div>
<table border=1>
<thead>
<tr>
<th>İSİM</th>
<th>SOYİSİM</th>
<th>CİNSİYET</th>
<th>MAAŞ</th>
<th>MAAŞ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personel in personeller|limitTo:satirSayisi"><!-- $scope.personeller ile gelen ifade-->
<td> {{ personel.isim | uppercase }} </td>
<td> {{ personel.soyisim }} </td>
<td> {{ personel.dogum | date:'dd-MM-yyyy'}} </td>
<td> {{ personel.maas |currency : '₺' :2 }} </td>
<td> {{ personel.maas |number :2 }} </td>
</tr>
</tbody>
</table>
</div>
</body>
ÖRNEK 2: Basit bir sayfalama uygulaması. Yukarıdaki kodlara ek olarak modele kayitSayisi ve sayfaNo değerlerini ekledik. limitTo filitresinin limitTo:sınır:baslangıç şeklinde kullanıldığını biliyoruz.
sınır ifadesine her sayfada gösterilecek kayıtsayısı.
başangıç ifadesine de sayfaNo*kayıtsayısı şeklinde kod uyguladığımızda text kutusundaki değişen her değer için bir sonraki sayfaya odaklanacaktır.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular
.module("persModul", [])
.controller("persController", function ($scope) {
var personeller=[
{ "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": "Erkek","maas": "3569" },
{ "isim": "Elfiye","soyisim": "Şencin","cinsiyet": "Erkek","maas": "4143" },
{ "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": "Erkek","maas": "2705" },
{ "isim": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" },
{ "isim": "Çağar","soyisim": "Alkan","cinsiyet": "Kız","maas": "1883" },
{ "isim": "Mükafi","soyisim": "Düşer","cinsiyet": "Kız","maas": "3869" },
{ "isim": "Süreha","soyisim": "Karakaya","cinsiyet": "Erkek","maas": "1796" },
{ "isim": "Taberi","soyisim": "Abacılı","cinsiyet": "Kız","maas": "4054" },
{ "isim": "Bala","soyisim": "Merkan","cinsiyet": "Erkek","maas": "2703" },
{ "isim": "Nil","soyisim": "Aksaç","cinsiyet": "Erkek","maas": "3510" },
{ "isim": "Ulualp","soyisim": "Seziş","cinsiyet": "Erkek","maas": "2688" },
{ "isim": "Çağlar","soyisim": "Selçuk atay","cinsiyet": "Erkek","maas": "3524" },
{ "isim": "Berkem","soyisim": "Erdoğan","cinsiyet": "Kız","maas": "2290" },
{ "isim": "Özgünel","soyisim": "Demirtaş","cinsiyet": "Erkek","maas": "3193" },
{ "isim": "Mübelliğ","soyisim": "Ölçer","cinsiyet": "Kız","maas": "3603" },
{ "isim": "Tuyuğ","soyisim": "Aral kaplan","cinsiyet": "Erkek","maas": "2270" },
{ "isim": "Zafir","soyisim": "Dingiz","cinsiyet": "Erkek","maas": "1880" },
{ "isim": "Gülnar","soyisim": "Dinç","cinsiyet": "Kız","maas": "1897" },
{ "isim": "Badegül","soyisim": "Tekelioğlu","cinsiyet": "Erkek","maas": "3587" },
{ "isim": "Binalp","soyisim": "İsen","cinsiyet": "Kız","maas": "4334" },
{ "isim": "Ganiye","soyisim": "Ekmekyapar","cinsiyet": "Erkek","maas": "2696" },
{ "isim": "Baykutay","soyisim": "Karadeniz","cinsiyet": "Erkek","maas": "3882" },
{ "isim": "Safiye","soyisim": "Muzoğlu","cinsiyet": "Kız","maas": "4015" },
{ "isim": "Atınç","soyisim": "Eroğlu","cinsiyet": "Kız","maas": "3757" },
{ "isim": "Sanaç","soyisim": "Yakıcı","cinsiyet": "Erkek","maas": "4088" },
{ "isim": "Mihrace","soyisim": "Aytekin","cinsiyet": "Erkek","maas": "3524" },
{ "isim": "Paksu","soyisim": "Savaşlı","cinsiyet": "Erkek","maas": "3686" },
{ "isim": "Sivar","soyisim": "Dinler","cinsiyet": "Erkek","maas": "4493" },
{ "isim": "Ataergin","soyisim": "Aker","cinsiyet": "Erkek","maas": "2922" },
{ "isim": "Emirkan","soyisim": "Pamukbasanoğlu","cinsiyet": "Erkek","maas": "2665" },
{ "isim": "Aksun","soyisim": "Karakoç","cinsiyet": "Erkek","maas": "3417" },
{ "isim": "Kamuran","soyisim": "Uzunoğlu","cinsiyet": "Erkek","maas": "3389" },
{ "isim": "Burgaç","soyisim": "Kazıcı","cinsiyet": "Erkek","maas": "2070" },
{ "isim": "Bargu","soyisim": "Sandıkcı","cinsiyet": "Erkek","maas": "1988" },
{ "isim": "Han","soyisim": "Güvendik","cinsiyet": "Kız","maas": "2511"}
];
$scope.personeller = personeller;
$scope.kayitSayisi=10;
$scope.sayfaNo=0;
});
</script>
</head>
<body ng-app="persModul">
<div ng-controller="persController">
<div>
Her Sayfada Gösterilecek Kayıt Sayısı:<strong>{{kayitSayisi}}</strong>
</div>
<div>
Sayfa Numarası: <input type="number" step="1" ng-model="sayfaNo" min="1" />
</div>
<table border=1>
<thead>
<tr>
<th>İSİM</th>
<th>SOYİSİM</th>
<th>CİNSİYET</th>
<th>MAAŞ</th>
<th>MAAŞ</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personel in personeller|limitTo:kayitSayisi:sayfaNo*kayitSayisi"><!-- $scope.personeller ile gelen ifade-->
<td> {{ personel.isim | uppercase }} </td>
<td> {{ personel.soyisim }} </td>
<td> {{ personel.dogum | date:'dd-MM-yyyy'}} </td>
<td> {{ personel.maas |currency : '₺' :2 }} </td>
<td> {{ personel.maas |number :2 }} </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Sonraki yazıda Sıralama Filtresini İnceleyeceğiz.
