- Katılım
- 19 Nis 2009
- Konular
- 423
- Mesajlar
- 1,880
- Çözüm
- 14
- Online süresi
- 3mo 2h
- Reaksiyon Skoru
- 968
- Altın Konu
- 38
- TM Yaşı
- 17 Yıl 2 Ay
- Başarım Puanı
- 267
- MmoLira
- 3,804
- DevLira
- 9
HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
AngularJS ile 3 tip filitreleme yapılabilir.
- Biçimlendirme Filtresi (Format Filter)
- Sıralama Filitresi (Sort Filter)
- Veri Filitresi (Filter Data)
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
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ı:
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.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
ü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.
| 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" /> |
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.
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="
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
"></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> |
