Bu yazıda angularjs ile özel filitre oluşturmayı inceleyeceğiz. Oluşturacağımız filtre bir fonksiyon olacak. Filtreleme ifadesine göre ekranda gösterilecek olan özel değerleri belirleyeceğiz.
Örneğimiz aşağıdaki resimden de anlaşılacağı gibi modelimizde bulunan cinsiyet değerleri veritabanından geldiğini düşünelim. Bu değerleri süzüp Kadın, Erkek, Seçilmedi olarak ekrana yazdıracağız.
Modülün filter fonksiyonu kendisine gönderilen 0, 1, 2 değerlerini sırasıyla Seçilmedi, Kadın, Erkek olarak değiştirip geriye döndürecektir. filter fonksiyonu modülün bir fonksiyonu olduğu için zincirleme yöntemi ile modüle bağlanıp oluşturulabilir.
filter fonksiyonu iki parametre almaktadır.
1.parametre: filtreye vereceğimiz isim
2.parametre: süzme işlemini yapacak anonim fonksiyon
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.filter("cinsiyet", function () { return function (cins) { switch (cins) { case 1: return "Kadın";break; case 2: return "Erkek";break; case 0: return "Seçilmedi";break; } } }) |
şeklinde filtre fonksiyonumuzu oluşturduk. Oluşturulan fonksiyonu modüle bağlayalım.
SCRIPT:
|
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 |
<script> var app = angular .module("persModul", []) .filter("cinsiyet", function () { return function (cins) { switch (cins) { case 1: return "Kadın";break; case 2: return "Erkek";break; case 0: return "Seçilmedi";break; } } }) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": 2,"maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": 2,"maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": 2,"maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ","cinsiyet": 1,"maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": 1,"maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": 1,"maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": 2,"maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": 1,"maas": "4054" } ]; $scope.personeller = personeller; }); </script> |
HTML: Özel filtreyi HMTL içinde kullanmak için parametre olarak göndereceğimiz ifadenin yanına ( | ) filtre fonksiyonuna verdiğimiz isimle çağırıyoruz.
|
1 2 3 |
<td> {{ personel.cinsiyet | cinsiyet }} </td> |
model üzerinden gelen 1, 2 değerlerini filtreye cins olarak gönderip Kadın yada Erkek olarak geriye getirmekte ve ekrana yazdırmaktadır. Tüm HTML Kodlarını yazacak olursak.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<body ng-app="persModul"> <div ng-controller="persController"> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>CİNSİYET</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet | cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> |
[divider]
HTML & SCRIPT
|
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 |
<!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", []) .filter("cinsiyet", function () { return function (cins) { switch (cins) { case 1: return "Kadın";break; case 2: return "Erkek";break; case 0: return "Seçilmedi";break; } } }) .controller("persController", function ($scope) { var personeller=[ { "isim": "Yezdan","soyisim": "Erdurak","cinsiyet": 2,"maas": "3569" }, { "isim": "Elfiye","soyisim": "Şencin","cinsiyet": 2,"maas": "4143" }, { "isim": "Ezfer","soyisim": "Ovacık","cinsiyet": 2,"maas": "2705" }, { "isim": "Teberhun","soyisim": "Karadağ","cinsiyet": 1,"maas": "2337" }, { "isim": "Çağar","soyisim": "Alkan","cinsiyet": 1,"maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşer","cinsiyet": 1,"maas": "3869" }, { "isim": "Süreha","soyisim": "Karakaya","cinsiyet": 2,"maas": "1796" }, { "isim": "Taberi","soyisim": "Abacılı","cinsiyet": 1,"maas": "4054" } ]; $scope.personeller = personeller; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>CİNSİYET</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet | cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> </html> |
[…] Konu 13: AngularJS ile Özel Filtre Oluşturma […]