/ angularjs

AngularJS Filter / Veri Filtreleme

angularjs-150x150-1

Bu yazımda angularjs kullandığımız zaman sık sık ihtiyaç duyduğumuz filtreleme konusuna değineceğim. Ng-repeat kullandığımızda tekrar eden bir çok verimiz oluyor ve bu verileri belirli kritelerle filtrelemek istiyoruz. Bunun için örnek bir kod yazalım beraber.

// app.js
angular.module('App', []).controller('filterController', function($scope) {

//Tüm şehirlerimizi json formatında cities içine atalım.
$scope.cities = {"TÜMÜ":{"name":"ŞEHİR"},"ADANA":{"name":"ADANA","plate":1},"ADIYAMAN":{"name":"ADIYAMAN","plate":2},"AFYONKARAHİSAR":{"name":"AFYONKARAHİSAR","plate":3},"AĞRI":{"name":"AĞRI","plate":4},"AMASYA":{"name":"AMASYA","plate":5},"ANKARA":{"name":"ANKARA","plate":6},"ANTALYA":{"name":"ANTALYA","plate":7},"ARTVİN":{"name":"ARTVİN","plate":8},"AYDIN":{"name":"AYDIN","plate":9},"BALIKESİR":{"name":"BALIKESİR","plate":10},"BİLECİK":{"name":"BİLECİK","plate":11},"BİNGÖL":{"name":"BİNGÖL","plate":12},"BİTLİS":{"name":"BİTLİS","plate":13},"BOLU":{"name":"BOLU","plate":14},"BURDUR":{"name":"BURDUR","plate":15},"BURSA":{"name":"BURSA","plate":16},"ÇANAKKALE":{"name":"ÇANAKKALE","plate":17},"ÇANKIRI":{"name":"ÇANKIRI","plate":18},"ÇORUM":{"name":"ÇORUM","plate":19},"DENİZLİ":{"name":"DENİZLİ","plate":20},"DİYARBAKIR":{"name":"DİYARBAKIR","plate":21},"EDİRNE":{"name":"EDİRNE","plate":22},"ELAZIĞ":{"name":"ELAZIĞ","plate":23},"ERZİNCAN":{"name":"ERZİNCAN","plate":24},"ERZURUM":{"name":"ERZURUM","plate":25},"ESKİŞEHİR":{"name":"ESKİŞEHİR","plate":26},"GAZİANTEP":{"name":"GAZİANTEP","plate":27},"GİRESUN":{"name":"GİRESUN","plate":28},"GÜMÜŞHANE":{"name":"GÜMÜŞHANE","plate":29},"HAKKARİ":{"name":"HAKKARİ","plate":30},"HATAY":{"name":"HATAY","plate":31},"ISPARTA":{"name":"ISPARTA","plate":32},"MERSİN":{"name":"MERSİN","plate":33},"İSTANBUL":{"name":"İSTANBUL","plate":34},"İZMİR":{"name":"İZMİR","plate":35},"KARS":{"name":"KARS","plate":36},"KASTAMONU":{"name":"KASTAMONU","plate":37},"KAYSERİ":{"name":"KAYSERİ","plate":38},"KIRKLARELİ":{"name":"KIRKLARELİ","plate":39},"KIRŞEHİR":{"name":"KIRŞEHİR","plate":40},"KOCAELİ":{"name":"KOCAELİ","plate":41},"KONYA":{"name":"KONYA","plate":42},"KÜTAHYA":{"name":"KÜTAHYA","plate":43},"MALATYA":{"name":"MALATYA","plate":44},"MANİSA":{"name":"MANİSA","plate":45},"KAHRAMANMARAŞ":{"name":"KAHRAMANMARAŞ","plate":46},"MARDİN":{"name":"MARDİN","plate":47},"MUĞLA":{"name":"MUĞLA","plate":48},"MUŞ":{"name":"MUŞ","plate":49},"NEVŞEHİR":{"name":"NEVŞEHİR","plate":50},"NİĞDE":{"name":"NİĞDE","plate":51},"ORDU":{"name":"ORDU","plate":52},"RİZE":{"name":"RİZE","plate":53},"SAKARYA":{"name":"SAKARYA","plate":54},"SAMSUN":{"name":"SAMSUN","plate":55},"SİİRT":{"name":"SİİRT","plate":56},"SİNOP":{"name":"SİNOP","plate":57},"SİVAS":{"name":"SİVAS","plate":58},"TEKİRDAĞ":{"name":"TEKİRDAĞ","plate":59},"TOKAT":{"name":"TOKAT","plate":60},"TRABZON":{"name":"TRABZON","plate":61},"TUNCELİ":{"name":"TUNCELİ","plate":62},"ŞANLIURFA":{"name":"ŞANLIURFA","plate":63},"UŞAK":{"name":"UŞAK","plate":64},"VAN":{"name":"VAN","plate":65},"YOZGAT":{"name":"YOZGAT","plate":66},"ZONGULDAK":{"name":"ZONGULDAK","plate":67},"AKSARAY":{"name":"AKSARAY","plate":68},"BAYBURT":{"name":"BAYBURT","plate":69},"KARAMAN":{"name":"KARAMAN","plate":70},"KIRIKKALE":{"name":"KIRIKKALE","plate":71},"BATMAN":{"name":"BATMAN","plate":72},"ŞIRNAK":{"name":"ŞIRNAK","plate":73},"BARTIN":{"name":"BARTIN","plate":74},"ARDAHAN":{"name":"ARDAHAN","plate":75},"IĞDIR":{"name":"IĞDIR","plate":76},"YALOVA":{"name":"YALOVA","plate":77},"KARABÜK":{"name":"KARABÜK","plate":78},"KİLİS":{"name":"KİLİS","plate":79},"OSMANİYE":{"name":"OSMANİYE","plate":80},"DÜZCE":{"name":"DÜZCE","plate":81}}

//Senaryomuzda, site kullanıcılarımızın bilgileri arasında yaşadıkları yer özelliği olsun.
 $scope.users= [
    {name:'Emre',city:'İSTANBUL'},
    {name:'İrem',city:'İSTANBUL'},
    {name:'Eray',city:'SİVAS'},
    {name:'Sabri',city:'OSMANİYE'},
    {name:'Ahmet',city:'OSMANİYE'},
    {name:'Mehmet',city:'İZMİR'},
    {name:'Veli',city:'ŞANLIURFA'},
    {name:'John',city:'İZMİR'},
    {name:'Sam',city:'İZMİR'},
    {name:'Zeynep',city:'İSTANBUL'},
    {name:'Ayşe',city:'ANKARA'},
    {name:'Mahmut',city:'ADANA'},
    {name:'Cem',city:'ANTALYA'}
  ];
});
// HTML tarafında ise basit bir şekilde ekrana kullanıcıları yazdıralım ve bu liste içerisinden arama yapalım.
//index.html

<html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<sciprt src="app.js"></script>

<body>

  <div ng-app="App" ng-controller="filterController">
  
  <input type="text" ng-model="myModel">
  
  <div ng-repeat="user in users | filter:myModel">
      <p>
        {{user.name}}  /  {{user.city}}
      </p>
  </div>

</div>

</body>

</html>

Gördüğünüz gibi basit şekilde bir input için model tanımladık ve ng-repeat içerisinde filter anahtar kelimesiyle bunu verdik. Bu şekilde inputta yazdığımız text listemizde aranacak ve bu texte sahip kayıtlar listelenecek. Ama bizim senaryomuzda, sadece şehre göre bir arama yapalım. Seçtiğimiz şehirde yaşayan kullanıcılarımızı filtreleyelim sadece. Bunun için modelimizde ufak bir değişiklik yapmamız yeterli.

  <input type="text" ng-model="myModel.city">
  
  <div ng-repeat="user in users | filter:myModel">
      <p>
        {{user.name}}  /  {{user.city}}
      </p>
  </div>

  // Bu değişiklikle sadece şehir özelliğine göre filtrelemiş olduk.

Son olarak bir farklı kullanım çeşiti daha var. Bu filtreleme olayını daha detaylı bir biçimde javascript tarafında da yapabiliriz. Bu bize verilerle oynamamızda daha büyük bir esneklik verir. Bu senaryomuzda javascript tarafında bir fonksiyonumuz olacak ve o fonksiyon isteğimize göre filtreleme yapacak. Daha sonra html tarafına boolean bir değer dönderecek. Eğer değer “true” ise verimiz listede gözükecek; “false” ise listemize dahil olmayacak.
Bunun için öncelikle HTML tarafını düzenleyelim:

<div ng-app="App" ng-controller="filterController">
  
  <select ng-model="selectedCity">
     <option ng-repeat="city in cities" value="{{city .name}}">{{city .name}}</option>
  </select>
  
  <div ng-repeat="user in users | filter:filterByCity">
      <p>
        {{user.name}}  /  {{user.city}}
      </p>
  </div>

  </div>

  //Burada filtrelemeyi filterByCity adında oluşturduğumuz bir fonksiyon ile yapacağız. 
  //Kısaca, listedeki her veri için bu fonksiyon çalışacak ve filtre kısasına uygun mu diye javascript tarafında kontrol edilecek.

Javascript tarafında ise;

 $scope.selectedCity="";
  
 $scope.filterByCity = function (item) {
    if($scope.selectedCity == "" || $scope.selectedCity == "ŞEHİR" || $scope.selectedCity == item.city)
         return true;
    else
         return false;
 }

Yazdığımız kodu denemek için

Bu basit bir senaryo olduğu için birinci yöntem size daha basit ve mantıklı gelebilir ama farklı senaryolarımız olabilir. İkinci yöntemi de çokça kullanabileceğimiz zamanlar olacaktır.
Hayatınızdan kod eksik olmasın :)