Daha önceki yazımızda angularjs ile basit arama işlemi yapmıştık. Bu yazıda birden fazla özelliğe göre arama filitrelemesi nasıl oluşturulacağını inceleyeceğiz.
Aşağıdaki örnekte arama yapmak için iki tane textbox kutumuz mevcut. Birinci kutuda isme göre arama, ikinci kutuda da cinsiyete göre arama yapılmaktadır. İki textboxa da değer girişi olduğunda tüm eşleşen satırlarlara göre süzme işlemi yapılmış olacaktır.
Tam Eşleştir işlemi yapan checkbox nesnesi ise ad ve soyad değerlerinin ikisini de BİREBİR AYNI İSE EKRANA GÖSTERECEKTİR. İçerisinde geçmesi yeterli olmayın kelimenin aynısını yazmayı zorlamaktadır. (Açıklayıcı olması için çalışma mantığı: checkbox kaldırılırsa sqldeki LIKE gibi çalışacak, checkbox aktifleştirilirse sqldeki = gibi çalışacaktır.)
SCRIPT: Daha önceki örneklerde olduğu gibi yine personel modelini ve controllerını kullanarak örneği açıklayalım.
|
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 |
<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" } ]; $scope.personeller = personeller; }); </script> |
HTML :filter kısımda arama filtresi textbox kutularındaki cinsiyet ve isim değerlerini almaktadır. tamEslestir ifadesi ise bire bir aynı olması için yine filter değerine eklenmiştir.
|
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 |
<body ng-app="persModul"> <div ng-controller="persController"> <div> <input type="text" ng-model="arama.isim" placeholder="İsim Girin"> <input type="text" ng-model="arama.cinsiyet" placeholder="Cinsiyet Girin"> <input type="checkbox" ng-model="tamEslestir" >Tam Eşleştir </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller |filter:arama:tamEslestir "> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> |
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 |
<!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" } ]; $scope.personeller = personeller; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <div> <input type="text" ng-model="arama.isim" placeholder="İsim Girin"> <input type="text" ng-model="arama.cinsiyet" placeholder="Cinsiyet Girin"> <input type="checkbox" ng-model="tamEslestir" >Tam Eşleştir </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller |filter:arama:tamEslestir "> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> </html> |
[divider]
Tek arama kutusu ile iki alana göre arama işlemini nasıl yapılır?
Aşağıdaki textbox ile isim ve soyisme göre arama yapmaktadır. Biraz açıklayalım. arama Modelinin adını araMetin olarak değiştirdik. $scope.arama adında bir tane metot oluşturduk. arama metotuna ng-repeat içindeki her satır tek tek item olarak gönderiliyor. if şartı araMetin modelini bulmazsa true değerini dödürüp tüm alanlara göre arama yaptırıyor. Bizim için önemli olan araMetin varsa (ki var) model içindeki isim ve soyisim ile eşleşirse true değerini döndürecek ve o satırı ekrana gösterecektir.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
$scope.arama = function (item) { if ($scope.araMetin == undefined) { return true; } else { if (item.isim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1 || item.soyisim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1) { return true; } } return false; }; }); |
Kodlarımızı toparlayıp yeniden yazarsak;
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 |
<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": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Bakar","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşkün","cinsiyet": "Kız","maas": "3869" } ]; $scope.personeller = personeller; $scope.arama = function (item) { if ($scope.araMetin == undefined) { return true; } else { if (item.isim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1 || item.soyisim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1) { return true; } } return false; }; }); </script> |
HTML:
|
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 |
<body ng-app="persModul"> <div ng-controller="persController"> <div> <input type="text" ng-model="araMetin" placeholder="İsim Girin"> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller |filter:arama"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> |
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 |
<!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": "Teberhun","soyisim": "Karadağ sazak","cinsiyet": "Kız","maas": "2337" }, { "isim": "Çağar","soyisim": "Bakar","cinsiyet": "Kız","maas": "1883" }, { "isim": "Mükafi","soyisim": "Düşkün","cinsiyet": "Kız","maas": "3869" } ]; $scope.personeller = personeller; $scope.arama = function (item) { if ($scope.araMetin == undefined) { return true; } else { if (item.isim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1 || item.soyisim.toLowerCase() .indexOf($scope.araMetin.toLowerCase()) != -1) { return true; } } return false; }; }); </script> </head> <body ng-app="persModul"> <div ng-controller="persController"> <div> <input type="text" ng-model="araMetin" placeholder="İsim Girin"> </div> <table border=1> <thead> <tr> <th>İSİM</th> <th>SOYİSİM</th> <th>TARİH</th> <th>MAAŞ</th> </tr> </thead> <tbody> <tr ng-repeat="personel in personeller |filter:arama"> <td> {{ personel.isim }} </td> <td> {{ personel.soyisim }} </td> <td> {{ personel.cinsiyet }} </td> <td> {{ personel.maas }} </td> </tr> </tbody> </table> </div> </body> </html> |
[…] Konu 12: AngularJS ile Birden Fazla Özelliğe Göre Filitreleme […]