AngularJS’de kolaylık sağlayan ve kod yazma derdinden kurtarıp daha anlaşılır projeler geliştirmemize yardımcı olan filtreleri bu makalede incelemeye çalışacağız.

AngularJS Filtreleri ve Kullanımı

AngularJS Filtre kullanım sözdizimi örnek olarak şu şekildedir.

Syntax

{{ data | filter: options}}

1	{{ data \| filter: options}}

Bazı filtre kullanımlarına ve çıktı sonuçlarına bakalım

Tarih Formatlama(date)

{{ '1388123412323' | date : 'MM/dd/yyyy @ HH:mm'}}
//Sonuç: 12/27/2013 @ 07:50

1 2	{{ '1388123412323' \| date : 'MM/dd/yyyy @ HH:mm'}} //Sonuç: 12/27/2013 @ 07:50

Karakter Büyütme(uppercase)

{{ 'murat öner' | uppercase }}
//Sonuç: MURAT ÖNER

1 2	{{ 'murat öner' \| uppercase }} //Sonuç: MURAT ÖNER

Karakter Küçültme(lowercase)

{{ 'MURAT ÖNER' | lowercase }}
//Sonuç: murat öner

1 2	{{ 'MURAT ÖNER' \| lowercase }} //Sonuç: murat öner

Belli sayıda karakter gösterme(limitTo)

{{ 'Test Açıklaması' | limitTo:8 }}
//Sonuç: Test Açı

1 2	{{ 'Test Açıklaması' \| limitTo:8 }} //Sonuç: Test Açı

Repeat Döngüsünü Sınırlama(limitTo)

Repeat döngüsünü sınırlamadan kasıt sql’de olduğu gibi top 1-2 şeklinde istenildiği kadar kayıt çekilmesi şeklinde buradaki amacıda repeat döngüsünün işlem yapacağı kayıt sayısı sınırlandırılmış oluyor. Alttaki döngüde ise 2 tane kayıt için döngü işlemi yapılacağı belirtilmiş.

<div ng-repeat="item in store.products | limitTo: 1"></div>

1	<div ng-repeat="item in store.products \| limitTo: 1"></div>

Sıralama(orderBy)

Yine sql’den örnek verecek olursak istediğiniz alan’a göre kayıtların sıralanması sağlanıyor buradada orderBy filtresine sıralama yapılacak alan belirtiliyor yalnız dikkat edilmesi gereken bir durum var eğer sıralamayı azalan şeklinde yapmak isterseniz alan adının başına - karakteri koyun alttaki örnekte olduğu gibi.

<div ng-repeat="item in store.products | orderBy: '-name'"></div>

1	<div ng-repeat="item in store.products \| orderBy: '-name'"></div>

Para Birimi Filtresi(currency)

Bu filtre sayesinde para birimi değerlerinizi farklı para birimi işareti ve kesir boyutunu ayarlamak için değişiklik yapabilmekteyiz.

Syntax

{{ parabirimi_değeri | currency : sembol : kesir_boyutu}}

1	{{ parabirimi_değeri \| currency : sembol : kesir_boyutu}}

Örnek

<div ng-init="amount= 1234.56">
  <input type="number" ng-model="amount"> <br>
  Varsayılan parabirimi sembolü ($): <span id="currency-default">{{amount | currency}}</span><br>
  Özel Parabirimi tanımlaması (TL): <span id="currency-custom">{{amount | currency: "TL"}}</span><br>
  Kesirsiz (0): <span id="currency-no-fractions">{{amount | currency: "TL":0}}</span>
</div>

Varsayılan parabirimi sembolü ($): <span id="currency-default">{{amount | currency}}</span><br>

Özel Parabirimi tanımlaması (TL): <span id="currency-custom">{{amount | currency: "TL"}}</span><br>

Kesirsiz (0): <span id="currency-no-fractions">{{amount | currency: "TL":0}}</span>

</div>

Sonuç

Varsayılan parabirimi sembolü ($): $1,234.56
Özel Parabirimi tanımlaması (TL): TL1,234.56
Kesirsiz (0): TL1,235

Varsayılan parabirimi sembolü ($): $1,234.56

Özel Parabirimi tanımlaması (TL): TL1,234.56

Kesirsiz (0): TL1,235

Number

Syntax

{{ deger | number : kesir_boyutu }}

1	{{ deger \| number : kesir_boyutu }}

Örnek

HTML

<!DOCTYPE html>
<html ng-app="numberFilterOrnegi">
 
  <head>
    <script src="https://code.angularjs.org/1.4.0-beta.4/angular.js"></ script>
    <script src="script.js"></ script>
  </head>
 
  <body ng-controller="MainController">
    <div>
      Girilen Sayı: <input ng-model="val" />
      <br />
      Varsayılan Format: <span id="number-default">{{val | number}}</span>
      <br />
      Kesirsiz: <span>{{val | number:0}}</span>
      <br />
      Negatif Sayı: <span>{{-val | number:4}}</span>
    </div>
  </body>
 
</html>

<!DOCTYPE html>

<head>

</head>

<div>

Girilen Sayı: <input ng-model="val" />

<br />

Varsayılan Format: <span id="number-default">{{val | number}}</span>

<br />

Kesirsiz: <span>{{val | number:0}}</span>

<br />

Negatif Sayı: <span>{{-val | number:4}}</span>

</div>

</body>

</html>

Javascript

angular.module('numberFilterOrnegi', [])
  .controller('MainController', ['$scope', function($scope) {
    $scope.val = 1234.56789;
}]);

angular.module('numberFilterOrnegi', [])

.controller('MainController', ['$scope', function($scope) {

$scope.val = 1234.56789;

}]);

Sonuç

Kendi Filter Tanımlamalarım

Array Nesnemizi Birleştirip(join) Gösterebiliriz.

Mevcut bir array nesnenizi birleştirip tek bir string nesnesi olarak göstermek için html tarafında angular blokları arasında nasıl çözüm üretebiliriz aslında üretilecek birçok çözüm var ama en sağlıklısı hangisi olacak şimdi düşünelim javascript kodları angular blokları arasında çalışıyor o zaman ben neden join işlemini direkt bu bloklar arasında yapmıyımki kafamı neden yoruyorum hemen başlayalım.

İlk Yöntem

Şöyle bir kod bloğu ile array nesnesinin array fonksiyonlarından olan join fonksiyonu ile boşluk ayracı kullanarak birleştirme işlemini hızlıca gerçekleştirdim.

{{['murat', 'öner'].join(' ')}}
// Sonuç: murat öner

1 2	{{['murat', 'öner'].join(' ')}} // Sonuç: murat öner

Bu üstteki kodu bir düşünelim 10’larca belkide yüzlerce yerde belli zaman aralıklarında array nesnelerini birleştirip gösterme ihtiyacınız oldu sürekli bunu yapacağız o zaman ama sizce sağlıklımı? neden değil hem gösteriyorsun hemde soruya boğuyorsun bizi amacın ne dediğinizi duyar gibiyim 🙂

giphy O zaman cevaba geçebiliriz bence hiç sağlıklı değil nedeni ise 100’lerce yerde kullanıldığını varsayalım hatta olasılığı bu kadar yükseltip ohhh o zaman ben kullanabilirim diyenler çıkmasın bu kirli koda ortak olmak istemiyorum o yüzden 2 defa dahi bu kod tekrar ederse hiç sağlıklı bir durum değil nedenlerinin en başında bir kere yönetim var neden peki şöyle oradaki arrayi ben tanımladım ve o array dolu ama sizin $scope nesneniz içerisindeki array’in her zaman bir array olarak geleceğinin garantisi varmı? undefined, null olursa ne olacak direkt exception hiç hoş bir durum değil kullandığınız her yerde revizeye gitmeniz gerektiği konusunda sinyaller almaya başladınız değilmi işte yönetim zorluğu, clean code olmayışı, kod tekrarı oluşu ve daha bir sürü nedenden dolayı bu yöntemi eliyoruz direkt.

İkinci yöntem

$scope nesnesine bir fonksiyon tanımlayıp bu fonksiyonu angular blokları arasında kullanırım o zaman diyebilirmiyiz hatta $rootScope’a tanımlar ve tüm controller’larımda kullanırım diyebiliriz belkide hemen örnek bir kodumuza bakalım.

angular.module('myCustomFilters', [])
  .run(function($rootScope){
    $rootScope.join = function(arry){
      //Bunu her yerde çatır çatır kullanırım
      return arry.join(' ')
    } 
  })
  .controller('MainController', ['$scope', function($scope) {
    $scope.join2 = function (arry)(){
      //Bu özel bunu bu controller'a özel yazdım.
      return arry.join(' ')
    }
}]);

angular.module('myCustomFilters', [])

.run(function($rootScope){

$rootScope.join = function(arry){

//Bunu her yerde çatır çatır kullanırım

return arry.join(' ')

}

})

.controller('MainController', ['$scope', function($scope) {

$scope.join2 = function (arry)(){

//Bu özel bunu bu controller'a özel yazdım.

return arry.join(' ')

}

}]);

Üstteki kodda angular module tanımı sonucunda eriştiğimiz run fonksiyonu callback’i ile $rootScope nesnesine erişiyor ve bu $scope nesnesine join adında bir fonksiyon tanımlıyoruz ve join fonksiyonu ile aynı module’den üretilmiş controller tanımı(ng-controller='') arasında angular blokları içerisinde şu şekilde kullanabiliriz.

{{ join(['murat', 'öner']) }}

1	{{ join(['murat', 'öner']) }}

üstteki kodu herhangi bir controller tanımım arasında angular blokları içerisinde rahatça kullanabiliyoruz ve ilk yöntem’e göre biraz daha okunaklı ve anlaşılır oldu değilmi o durumda doğru yöntem bu diyebilirmiyiz? hmmmmm…. hayır her ne kadar temiz gözüksede bence yinede sağlıklı değil neden derseniz bazı kodlamaların standart’a oturması sizin geliştirme sürenizi o kadar kısaltıyorki eğer framework’ler kullanıyorsanız örnek olarak şuan bizim angular’ı kullandığımız gibi o zaman framework’ü daha iyi hazmedebilmek ve yeteneklerini en üst düzeyde kullanabilmek kendi tanımlamalarınızda framework tanımlamalarını kullandığınız gibi olursa gözünüz kapalı kod yazar kodlama hız artışı, okunabilir kod artışı gibi birçok şeye sahip olabilirsiniz ve sonuç olarak ikinci yöntemide önermiyorum.

Üçüncü yöntem

O zaman kesin üçtür diyenleri duyuyorum kulaklarım çınlıyor şuan 🙂

giphy Peki üçüncü yöntem nedir üçüncü yöntem angular custom filter tanımı tabikide ikinci yöntemin son paragraflarında aslında mesajı verdim. Dediğim gibi framework’e ayak uydurursanız hem framework’ü gerçek anlamda çok daha iyi hazmedebiliyor olursunuz hemde şu join fonksiyonu acaba özel controller’im içindemiydi yoksa rootScope’amı tanımladım hemen kontrol edip öyle yazmaya devam edeyim v.s. sizi engelleyecek cümleler silsilesi ile uğraşmamak için angular filter’ı tanımlayacağız böylelikle yönetim tek yerde olacak ve nasıl kullanılacağı ile hiçbir sıkıntımız olmayacak çünkü angular’ın makale girişinde yer alan onlarca filter kullanımında olduğu gibi kullanacağız bizde kendi filter tanımımızı o zaman artık kendi filter tanımımıza geçebiliriz.

app.filter('join', function(){
    return function(input, seperator){
      return (input || []).join(seperator || ' ')
    }
});

app.filter('join', function(){

return function(input, seperator){

return (input || []).join(seperator || ' ')

}

});

Gördüğünüz üzere kendi özel angular filter tanımızı yaptık şimdi üç yöntemin yer aldığı kodu ve sonucu topluca görelim ve bitirelim.

5/5 - (1 vote)

Kategoriler

Bloga e-posta ile abone ol

AngularJS Filtreleri Ve Kullanımı