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.
<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.
<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.
<!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.
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