AngularJS serach filter kullanarak arama işlemlerinin nasıl yapıldığını inceleyeceğiz.
Yukarıdaki arama kutucuğuna yazı girişi olduğunda, sadece tabloda eşleşen satırları göstermesi beklenir. Daha fazla açıklama yapmadan uygulamamızı yazmaya başlayalım.
SCRIPT: Yine eski makalelerde kullandığım personel modelini kullanarak bu örneği açıklayacağı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: Arama için bir tane textbox ekledim. Text kutusuna model olarak arama ifadesini parametre olarak geçtim. arama ifadesini ng-repeat içinde filitre olarak listelemeye filter:arama olarak yerleştirmek arama filitresi için yeterli oldu.
|
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> Aranacak İfade: <input type="text" ng-model="arama" placeholder="Aramak için birşeyler 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 Arama kutusuna girilen değerler hangi hücre ile eşleşirse o satırlar döndürülmektedir. isim,soyisim yada maas gibi özel bir filitreleme yoktur.
|
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 |
<!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> Aranacak İfade: <input type="text" ng-model="arama" placeholder="Aramak için birşeyler 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> <!-- sayfaNo*kayitSayisi-1 şeklideki kullanım sayfalamanın 1-2-3 şekilnde olması için.--> <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> |
Belirlediğimiz özel bir alana göre arama yapmak istersek;
Sadece text kutusundaki arama modeline aranacak alanın adını özellik olarak eklemek yeterli olacaktır.
|
1 2 3 |
Aranacak İfade: <input type="text" ng-model="arama.isim" placeholder="İsimlerde Arama Yapın"> |
Merhabalar,
Öncelikle bildiklerini paylaştığın için teşekkür ederim.
Personel bilgilerini elle yazmışsınız “var personeller=[…]” içine
peki bualanı elle yazmak yerine bir tabloda olsa o tablodan aratabilirmiyiz
veya bir veri tabanında ki tablodan…
Sonraki yazılarda veritabanı bağlantıları ile ilgili örnekler var. Angularjs dersleri içinde Asp ve php ile yapılmış örnekleri inceleyebilirsiniz
[…] Konu 11:AngularJS ile Arama Filitresi […]