Ağu.20

AngularJS (1.3 / 1.5) Eğitimi: Filters (Filtreler)

Filtreler, AngularJS’de verileri formatlamaya, dönüştürmeye, sıralamaya ve bunun gibi bir takım işleri yapmaya yarayan hazır metotlardır.

Bu konuyu örnekler üzerinden inceleyelim. Aşağıdaki gibi basit bir HTML sayfa şablonumuz olsun.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script>
angular.module('filtreler', []).controller('ctrl', function($scope) {
	// $scope değişkenleri buraya…
});
</script>
<div ng-app="filtreler" ng-controller="ctrl">
<h1></h1>
</div>

Burada AngularJS’yi projeye dahil ediyoruz. Basit bir module oluşturup direkt controller’ını tanımladık.

içinde de bir h1 tag’ımız var. Bu tag içerisinde filtreleri test edeceğiz. Module içinde de örneklerimizde sırası ile bir veri tanımlayacağız ve bu veriyi h1 tag’i içinde filtreleyip göstereceğiz.

currency (para birimi)

Verilen nümerik değerin sonuna veya başına, lokal dil ayarınıza göre para birimini ekler.

Aşağıdaki gibi bir verimiz olsun.

$scope.bakiye = 19000;

Bunun filtrelemesini de yapalım…

<h1>{{bakiye | currency}}</h1>

Görüldüğü üzere filtre kullanabilmek için, değer isminden sonra bir | (Altgr + < işareti ile çıkar) işareti koyup, ardından filtre ismimizi yazıyoruz. Bu filtrenin sonucu aşağıdaki gibi olacaktır. $19,000.00

Bilgisayarımın lokasyonu şu an Amerika olduğu için Dolar’a dönüştürdü. Sizin eğer Türkiye ise, TL olarak dönüştürecektir.

date (tarih)

Float olarak verilen tarih değerini (yani milisaniye cinsinden 1970’den itibaren bugüne kadar olan zaman) tarihe çevirir. Bu çeviri işleminde ne tür bir tarihe çevireceğinizi de belirtebileceğiniz ek parametreler ekleyebilirsiniz.

Şu anki (kitabı yazarken) tarih milisaniye cinsinden aşağıdaki değerde:

1496870657818

Tarih değerini isterseniz şu JavaScript fonksiyonuyla da alabilirsiniz.

$scope.tarih = new Date().getTime();

Şimdi de tarih değerini çeşitli formatlar ile dönüştürelim.

<h1>{{tarih | date : 'short' }}</h1>
<h1>{{tarih | date : 'medium' }}</h1>
<h1>{{tarih | date : 'shortDate' }}</h1>
<h1>{{tarih | date : 'mediumDate' }}</h1>
<h1>{{tarih | date : 'longDate' }}</h1>
<h1>{{tarih | date : 'fullDate' }}</h1>
<h1>{{tarih | date : 'shortTime' }}</h1>
<h1>{{tarih | date : 'mediumTime' }}</h1>

date filtresini kullanırken : işareti ekleyip, ‘ ‘ işaretleri arasında string olarak tarih metodunu da tanımlıyoruz.

Tarih çıktılarımız da şu şekilde olacaktır:

6/8/17 12:28 AM
Jun 8, 2017 12:28:26 AM
6/8/17
Jun 8, 2017
June 8, 2017
Thursday, June 8, 2017
12:28 AM
12:28:26 AM

lowercase (küçük harf)

Vermiş olduğunuz String değerini küçük harfle yazdırır. Aşağıdaki gibi bir String’imiz olsun.

$scope.isim = "AngularJS";

Bu String’e de lowercase filtresi uygulanışı aşağıdaki gibidir.

<h1>{{isim | uppercase}}</h1>

angularjs

uppercase (büyük harf)

Vermiş olduğunuz String değerini büyük harfle yazdırır. Aşağıdaki gibi bir String’imiz olsun.

$scope.isim = "AngularJS";

Bu String’e de uppercase filtresi uygulanışı aşağıdaki gibidir.

<h1>{{isim | uppercase}}</h1>

ANGULARJS

filter (filtre)

Array veya Object verilerinde uygulanır. Filtre olarak vermiş olduğunuz parametre değerini dizi değerleri içerisinde tek tek arar ve bu parametre değerini hangi elemanda bulduysa o elemanı verir. Yani o veri nesnesi içinde, sadece filtre olarak vermiş olduğunuz değerler varmış gibi davranış gösterilir. Genellikle ng-repeat ile kullanılır.

Şöyle basit bir Array verimiz olsun.

$scope.meyveler = ['elma', 'armut', 'çilek', 'üzüm',' karpuz'];

ng-repeat ile bu meyveleri yazdıralım. Ek olarak bir input text ekleyelim ve input text’e girilen içeriğe göre filtreleme yaptıralım.

<input ng-model="aramaDegeri" />
<h1 ng-repeat="meyve in meyveler | filter : aramaDegeri">{{meyve}}</h1>

Input’a girilen değer aramaDegeri model ismi ile tutuluyor. Bu değer de filter’de parametre olarak kullanılıyor. h1 etiketi içinde bir ng-repeat döngümüz var. Input’a bir değer girilmezse bütün meyveler listelenecek. Ancak bir değer girilirse, o değer hangi eleman içinde geçiyorsa o görünecek. Mesela input’a “a” yazarsam, içinde a harfi geçen meyveler gelir. Yani elma, armut ve karpuz.

orderBy (Sıralama)

Bir JSON verisinde, bir key’e göre sıralama yapmanızı sağlar. Bu sıralama ASC ve DESC metodu ile de yapılabilir. Yani artan veya azalan şeklinde bir sıralama yapılabilmektedir. Bir örnek ile inceleyelim. Örneğimizde ek olarak bir tablo oluşturup, bu tablonun başlığına tıkladıkça artan veya azalan olacak şeklinde sıralama yaptıracağız.

Aşağıdaki gibi bir JSON verimiz olsun.

$scope.meyveler = [ {ad:'elma',kg:'122'}, {ad:'armut',kg:'312'}, {ad:'çilek',kg:'512'} ];

JSON verimizde 3 adet meyvenin adını ve kg değerini tanımladık. ad ve kg bizim key değerlerimizdir.

<table>
    <thead>
      <td><b ng-click="asc=!asc">İsim</b></td>
      <td><b>Kg</b></td>
    </thead>
    <tbody>
      <tr ng-repeat = "meyve in meyveler | orderBy : ad : asc">
        <td>{{meyve.ad}}</td>
        <td>{{meyve.kg}}</td>
      </tr>
    </tbody>
</table>

Yazdığımız kodda biraz eklemeler var, anlatayım. İlk olarak basitçe bir

yapısı oluşturduk. 2 sütunlu bu tabloda İsim ve Kg sütun başlıklarını verdik. İsim olanın b etiketine ng-click direktifini ekledik. Böylece İsim’e tıklandığında bir işlem yapılacak. Yapılan işlemde de asc=!asc hesaplaması yapılıyor. asc burada bir değişken ismidir, dilerseniz asc yerine başka bir isim de kullanabilirdiniz. Bu değere de sürekli olarak kendi değerinin tersi atanıyor. Yapılan bu mantıkla asc değeri ilk başta tanımsız olduğu için null değerindedir. Butona ilk tıklandığında true değeri atanacak her tıklamada da o anki değerinin tersi atanacak, yani true, sonra false, sonra tekrar yine true gibi…

tr etiketinde de bir ng-repeat işlemi var. Burada orderBy filtresi ile ilk olarak hangi key’e göre sıralama yapılacağı, arada bir : işareti ve sonrasında da tersine mi düzüne mi, yani azalan mı artan mı sıralama olacak true/false parametresi ile belirleniyor.

İlk yürütüldüğünde alfabetik olarak:

İsim’e tıklandığında:

limitTo (Limitli Sıralama)

ng-repeat ile kullanılan başka bir filtredir. Ek olarak vereceğiniz sayı değeri kadar elemanın gösterilmesini sağlar. Yukarıdaki örneğimizde şöyle bir değişiklik yapalım…

<tr ng-repeat = "meyve in meyveler | limitTo: 2">

Verdiğimiz 2 değerine göre, normalde 3 elemanı olan JSON verisi için listede 2 tane eleman görünecek.

Özel Filtre Yazmak

AngularJS içinde tanımlanan filtreler her ne kadar çoğu zaman işimize yarayacak olsa da bazen özelleştirilmiş ve kendi ihtiyaçlarımız doğrultusunda işlem yapan filtrelere de ihtiyaç duyarız. Örneğin; vermiş olduğumuz sayı değerinin karesini bize getiren bir filtre yapalım.

En basit hali ile bir filtre aşağıdaki gibi hazırlanabilir.

angular.module('filtreler', [])
.controller('ctrl', function($scope) {
   $scope.sayilar = [1,2,3,4,5,6,7,8,9];
})
.filter('kareAl', function() {
    return function(x) {
       return x*x;
    }
})

Filtre yapısını incelediğimizde .filter ile başladığını görüyoruz. Aynı .controller’daki gibi bir syntax yapısı var.

Filtre’nin ilk parametresi ismidir. İkinci parametre de bir function’dur. Bu fonksiyonun süslü parantezleri açılır ve içine return olan başka bir fonksiyon yazılır. Bu fonksiyon da mutlaka bir parametre almak zorundadır. Tahmin edeceğiniz üzere VIEW katmanında | operatörü ile filtreyi kullandığımızda, operatörün sol tarafında kalan değeri otomatik olarak almaktadır. Yine bu fonksiyon da belirli işlemler sonrasında elde edilen yeni değeri mutlaka return etmelidir. İşte bu edilen return, VIEW katmanına bağlanacaktır. Yaptığımız örneğimizde x parametresini kendisi ile çarpıyor, yani kare alma işlemi yapıyor.

Değerlerimizi, yani sayilar değişkenimizin değerlerini hem orijinal hali ile hem de kareleri alınmış (yani filtre uygulanmış hali ile) yanyana yazdıralım.

<span ng-repeat = "sayi in sayilar">{{sayi}}, </span>
<br>
<span ng-repeat = "sayi in sayilar">{{sayi | kareAl}}, </span>

1, 2, 3, 4, 5, 6, 7, 8, 9,
1, 4, 9, 16, 25, 36, 49, 64, 81,

İçeriği paylaş:
  • facebook
  • twitter

Leave a comment

Yorum