<\/div>\n

\u00d6nceki yaz\u0131lar\u0131m\u0131zdan AngularJS\u2019de Filtreler<\/a> isimli makalemde AngularJS’de bulunan haz\u0131r filtrelere de\u011finmi\u015ftik. \u0130\u015flevsel olarak bu filtrelerin yetersiz kald\u0131\u011f\u0131 yahut s\u0131n\u0131rlar\u0131n\u0131n d\u0131\u015f\u0131nda olan bir eylemi ger\u00e7ekle\u015ftirmek i\u00e7in kendi \u00f6zel filtrelerimizi olu\u015fturmam\u0131z gerekmektedir. \u0130\u015fte bu makalemizde AngularJS’de \u00f6zel filtrelerin nas\u0131l olu\u015fturulaca\u011f\u0131ndan bahsedece\u011fiz.<\/p>\n

Yaz\u0131m\u0131z\u0131n derinliklerine dalmadan \u00f6nce baz\u0131 noktalar\u0131 ayd\u0131nlatmakta fayda g\u00f6r\u00fcyorum. Teknik olarak \u00f6zel filtre tan\u0131mlayacaksak e\u011fer bunun bir s\u0131n\u0131rlamas\u0131 olmasa gerektir. Do\u011fal olarak pratikte s\u0131n\u0131rs\u0131z esnekli\u011fe sahip olan bu konuyu ben \u00fc\u00e7 tip ile s\u0131n\u0131rlamaktay\u0131m. Neden mi? \u00c7\u00fcnk\u00fc; analizlerim do\u011frultusunda ihtiyaca binaen \u00fc\u00e7 tip \u00f6zel filtre olu\u015fturuldu\u011fu kanaatine varm\u0131\u015f bulunmaktay\u0131m.<\/p>\n

Olu\u015fturaca\u011f\u0131m\u0131z \u00f6zel filtre tiplerini a\u015fa\u011f\u0131daki gibi genel ba\u015fl\u0131klar halinde gruplayabiliriz.<\/p>\n

Static(Tek) Kullan\u0131ml\u0131k Filtreler<\/em><\/li>\n

Repeat \u0130\u00e7in Filtreler<\/em><\/li>\n

Arg\u00fcmansal\/Parametrik Repeat \u0130\u00e7in Filtreler<\/em><\/li>\n<\/ul>\n
\u015eimdi her\u015feyden \u00f6nce genel olarak bir \u00f6zel filtre nas\u0131l tan\u0131mlan\u0131r inceleyelim. Ard\u0131ndan yukar\u0131daki \u00fc\u00e7 farkl\u0131 tipte filtreleri tek tek ele al\u0131p konumuzu nihayete erdirelim.<\/p>\n
\u00d6zel filtreleri mod\u00fcle ba\u011fl\u0131 “filter” fonksiyonu ile olu\u015fturabilmekteyiz. Genel prototip a\u015fa\u011f\u0131daki gibi olacakt\u0131r.<\/p>\n
\r\n angular.module("OrnekModul", []).filter("OrnekFiltre", function () {\r\n return function (x, y, z) {\r\n return "---";\r\n };\r\n })\r\n<\/pre>\n
Mod\u00fcl fonksiyonu \u00fczerinden “filter” fonksiyonu \u00e7a\u011fr\u0131lacak ve birinci parametresinde ilgili filtreye bir isim belirtilecek, ikinci parametrede ise i\u015flevselli\u011fi ger\u00e7ekle\u015ftirecek anonim bir fonksiyon tan\u0131mlanacakt\u0131r. Bu anonim fonksiyon i\u00e7erisinde geriye bir fonksiyon return edilecek ve i\u015flemler burada ger\u00e7ekle\u015ftirilecektir. Bu \u00f6zel filtrenin uyguland\u0131\u011f\u0131 de\u011feri “x” de\u011fi\u015fkeni yakalayacakt\u0131r. “y” ve “z” de\u011fi\u015fkenleri “:” operat\u00f6r\u00fc ile verilecek olan parametrelerdir.<\/p>\n
Bu prototipte olu\u015fturdu\u011fumuz filtre yap\u0131s\u0131n\u0131 hangi veri \u00fczerinde kullanacaksak “|” operat\u00f6r\u00fc tekrardan devreye girecektir.<\/p>\n
\u015eimdi \u00f6zel filtrelerimizi genel gruplar halinde tek tek ele alma zaman\u0131 geldi.<\/p>\n
Static(Tek) Kullan\u0131ml\u0131k Filtreler<\/h3>\n
Tek(static) bir veri \u00fczerinde \u00f6zel filtre olu\u015fturdu\u011fumuz durumlar bu kategoride incelenecektir.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/angular.min.js"><\/script>\r\n <script>\r\n angular.module("ModulApp", []).filter("AdiBuyult", function () {\r\n return function (deger) {\r\n return deger.toUpperCase();\r\n };\r\n }).controller("ControllerApp", function ($scope) {\r\n this.Ad = "gen\u00e7ay y\u0131ld\u0131z";\r\n });\r\n <\/script>\r\n<\/head>\r\n<body ng-app="ModulApp" ng-controller="ControllerApp as personel">\r\n {{personel.Ad | AdiBuyult}}\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “AdiBuyult” isimli bir \u00f6zel filtre olu\u015fturulmu\u015ftur. Bu filtre i\u00e7eri\u011finde ad\u0131ndan da anla\u015f\u0131laca\u011f\u0131 \u00fczere uygulanaca\u011f\u0131 de\u011ferin t\u00fcm karakterlerini b\u00fcy\u00fck olacak \u015fekilde bi\u00e7imlendirecektir.<\/p>\n
Benzer mant\u0131kla ilgili de\u011ferin bir de\u011fi\u015fken \u00fczerinde bulunma \u015fart\u0131 gerekmemektedir. A\u015fa\u011f\u0131daki \u00f6rne\u011fi inceleyiniz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/angular.min.js"><\/script>\r\n <script>\r\n angular.module("ModulApp", []).filter("AdiBuyult", function () {\r\n return function (deger) {\r\n return deger.toUpperCase();\r\n };\r\n });\r\n <\/script>\r\n<\/head>\r\n<body ng-app="ModulApp">\r\n {{"Gen\u00e7ay Y\u0131ld\u0131z" | AdiBuyult}}\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Birden fazla parametrik filtreyide a\u015fa\u011f\u0131daki gibi olu\u015fturabilmekteyiz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/angular.min.js"><\/script>\r\n <script>\r\n angular.module("ModulApp", []).filter("Carp", function () {\r\n return function (deger, katsayi, us) {\r\n if (us == null)\r\n us = 1;\r\n return Math.pow(deger * katsayi, us);\r\n };\r\n });\r\n <\/script>\r\n<\/head>\r\n<body ng-app="ModulApp">\r\n <input type="text" ng-model="Deger" \/><br \/>\r\n {{Deger | Carp : 3 : 2 }}\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
$\"AngularJS'de$ <\/a>
\nG\u00f6r\u00fcld\u00fc\u011f\u00fc \u00fczere “Carp” isimli \u00f6zel filtremiz inputa girilen de\u011feri \u00f6nce “3” de\u011feri ile \u00e7arpmakta ve ard\u0131ndan sonucun karesini almaktad\u0131r.<\/p>\n
Repeat \u0130\u00e7in Filtreler<\/h3>\n
Elimizdeki veri k\u00fcmelerini repeat ederken olu\u015fturaca\u011f\u0131m\u0131z parametresiz \u00f6zel filtreler bu kategoride incelenecektir.
\nA\u015fa\u011f\u0131da bir personel listesi repeat edilirken cinsiyet bilgileri \u00f6zel filtre sayesinde bi\u00e7imlendirilmektedir.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/angular.min.js"><\/script>\r\n <script>\r\n angular.module("ModulApp", []).filter("CinsiyetBelirle", function () {\r\n return function (lists) {\r\n \/\/lists parametresi ile veri k\u00fcmesi elde ediliyor.\r\n for (var i = 0; i < lists.length; i++) {\r\n \/\/Elemanlar d\u00f6ng\u00fc sayesinde tek tek elde edilerek\r\n \/\/cinsiyetleri kontrol ediliyor ve bi\u00e7imlendiriliyor.\r\n switch (lists[i].Cins) {\r\n case 1:\r\n lists[i].Cins = "Erkek";\r\n break;\r\n case 0:\r\n lists[i].Cins = "Kad\u0131n";\r\n break;\r\n }\r\n }\r\n \/\/Rezerve edilen veri k\u00fcmesi son haliyle geri d\u00f6nd\u00fcr\u00fcl\u00fcyor.\r\n return lists;\r\n };\r\n }).controller("ControllerCinsiyet", function ($scope) {\r\n $scope.Personeller =\r\n [\r\n { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", Cins: 1 },\r\n { Adi: "Melisa", SoyAdi: "Coner", Cins: 0 },\r\n { Adi: "Elif", SoyAdi: "\u015eim\u015fek", Cins: 0 },\r\n { Adi: "Mehmet", SoyAdi: "Asl\u0131bay", Cins: 1 },\r\n { Adi: "\u015eule", SoyAdi: "Nemelaz\u0131m", Cins: 0 }\r\n ];\r\n });\r\n <\/script>\r\n<\/head>\r\n<body ng-app="ModulApp" ng-controller="ControllerCinsiyet">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Ad\u0131<\/th>\r\n <th>Soyad\u0131<\/th>\r\n <th>Cinsiyet<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr ng-repeat="personel in Personeller | CinsiyetBelirle">\r\n <td>{{personel.Adi}}<\/td>\r\n <td>{{personel.SoyAdi}}<\/td>\r\n <td>{{personel.Cins}}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
$\"AngularJS'de$ <\/a><\/p>\n
Arg\u00fcmansal\/Parametrik Repeat \u0130\u00e7in Filtreler<\/h3>\n
Elimizdeki veri k\u00fcmelerini repeat ederken olu\u015fturaca\u011f\u0131m\u0131z parametreli \u00f6zel filtreler bu kategoride incelenecektir. Yukar\u0131daki filtre tipinden tek fark\u0131 repeat \u00fczerinde parametre bar\u0131nd\u0131ran \u00f6zel bir filtre olu\u015fturulmas\u0131d\u0131r.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/angular.min.js"><\/script>\r\n <script>\r\n angular.module("ModulApp", []).filter("CinsiyetBelirleveIsimSinirlandir", function () {\r\n return function (lists, stringlength) {\r\n \/\/lists parametresi ile veri k\u00fcmesi elde ediliyor.\r\n for (var i = 0; i < lists.length; i++) {\r\n \/\/Elemanlar d\u00f6ng\u00fc sayesinde tek tek elde edilerek\r\n \/\/cinsiyetleri kontrol ediliyor ve bi\u00e7imlendiriliyor.\r\n switch (lists[i].Cins) {\r\n case 1:\r\n lists[i].Cins = "Erkek";\r\n break;\r\n case 0:\r\n lists[i].Cins = "Kad\u0131n";\r\n break;\r\n }\r\n lists[i].Adi = lists[i].Adi.substring(0, stringlength);\r\n }\r\n \/\/Rezerve edilen veri k\u00fcmesi son haliyle geri d\u00f6nd\u00fcr\u00fcl\u00fcyor.\r\n return lists;\r\n };\r\n }).controller("ControllerCinsiyet", function ($scope) {\r\n $scope.Personeller =\r\n [\r\n { Adi: "Gen\u00e7ay", SoyAdi: "Y\u0131ld\u0131z", Cins: 1 },\r\n { Adi: "Melisa", SoyAdi: "Coner", Cins: 0 },\r\n { Adi: "Elif", SoyAdi: "\u015eim\u015fek", Cins: 0 },\r\n { Adi: "Mehmet", SoyAdi: "Asl\u0131bay", Cins: 1 },\r\n { Adi: "\u015eule", SoyAdi: "Nemelaz\u0131m", Cins: 0 }\r\n ];\r\n });\r\n <\/script>\r\n<\/head>\r\n<body ng-app="ModulApp" ng-controller="ControllerCinsiyet">\r\n <table>\r\n <thead>\r\n <tr>\r\n <th>Ad\u0131<\/th>\r\n <th>Soyad\u0131<\/th>\r\n <th>Cinsiyet<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr ng-repeat="personel in Personeller | CinsiyetBelirleveIsimSinirlandir : 3">\r\n <td>{{personel.Adi}}<\/td>\r\n <td>{{personel.SoyAdi}}<\/td>\r\n <td>{{personel.Cins}}<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funu incelerseniz e\u011fer “CinsiyetBelirleveIsimSinirlandir” isimli \u00f6zel filtremiz hem cinsiyetleri belirleme i\u015flevini g\u00f6rmekte hem de verilen parametre de\u011feri kadar ilgili personelin ad\u0131nda substring fonksiyonu ile de\u011fer g\u00f6stermektedir.<\/p>\n
$\"AngularJS'de$ <\/a><\/p>\n
Umar\u0131m faydal\u0131 ve bilgilendirici bir yaz\u0131 olmu\u015ftur.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d6nceki yaz\u0131lar\u0131m\u0131zdan AngularJS\u2019de Filtreler isimli makalemde AngularJS’de bulunan haz\u0131r filtrelere de\u011finmi\u015ftik. \u0130\u015flevsel olarak bu filtrelerin yetersiz kald\u0131\u011f\u0131 yahut s\u0131n\u0131rlar\u0131n\u0131n d\u0131\u015f\u0131nda olan bir eylemi ger\u00e7ekle\u015ftirmek i\u00e7in kendi \u00f6zel filtrelerimizi olu\u015fturmam\u0131z gerekmektedir. \u0130\u015fte bu makalemizde AngularJS’de...<\/p>\n","protected":false},"author":1,"featured_media":7002,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2022],"tags":[2024,2118,2120,2119],"class_list":["post-7164","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angularjs","tag-angularjs","tag-angularjsde-ozel-filtre-olusturma","tag-create-custom-filter-angularjs","tag-ozel-filtre-olusturma"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7164","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=7164"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/7164\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/7002"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=7164"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=7164"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=7164"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Static(Tek) Kullan\u0131ml\u0131k Filtreler<\/h3>\nTek(static) bir veri \u00fczerinde \u00f6zel filtre olu\u015fturdu\u011fumuz durumlar bu kategoride incelenecektir.<\/p>\n