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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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.
|
1 2 3 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
<!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.
[…] inceleyeceğiz. AngularJS ile veri sıralama kavramı konusunda yeni olanlar öncelikle AngularJS Filitre Kullanımı | AngularJS Filters makalesi okumalarını tavsiye […]
[…] Konu 8: AngularJS Filitre Kullanımı | AngularJS Filters […]