Pazartesi , 24 Temmuz 2017
Anasayfa » JavaScript » AngularJS » AngularJS Filitre Kullanımı | AngularJS Filters

AngularJS Filitre Kullanımı | AngularJS Filters

Bu yazıda AngularJS ile Filitre kullanımını inceleyeceğiz. AngularJS ile 3 tip filitreleme yapılabilir.

 

  1. Biçimlendirme Filtresi (Format Filter)
  2. Sıralama Filitresi (Sort Filter)
  3. Veri Filitresi (Filter Data)

AngularJS Filitre Dökümanı

AngularJS filtreleri bildirimler(directive) ile kullanılabileceği gibi bağlantı ifadeleri(binding expression) ile de kullanılabilir.

Filtreyi uygulamak için HTML içindeki ifadenin yanına ( | ) sembolü ile filtrelerler eklenir.

Kural:  {{ ifade | filitreAdı:parametre}}

 

Veri Biçimlendirmek için AngularJS Filtreleri

Filtre Tanım
lowercase Tüm karekterleri küçük karakter olarak biçimlendirir
uppercase Tüm karekterleri büyük karakter olarak biçimlendirir
number Bir sayıyı metin olarak biçimlendirir. Virgül ile binde ve ondalık ayıracı dahil.
currency Bir sayıyı  döviz kuru olarak biçimlendirir. Varsayılan $ sembolüdür. Özel döviz kuru da tanımlanabilir.
date Bir tarihi istenilen formatta metin olarak biçimlendirir.

 

AngularJS Tarih Biçimleri

Biçim Sonuç
yyyy 4 basamaklı yıl. Örn: 2007
yy 2 basamaklı yıl. Örn: 1988 => 88
MMMM January – December
MMM Jan – Dec
MM 01 – 12
M 1 – 12 (Sıfırsız)
dd 01 – 31
d 1 – 31 (Sıfırsız)

Angular tarih formatı dökümanı:
https://docs.angularjs.org/api/ng/filter/dateü

limitTo filitresi : kaç satır yada kaç karater gösterileceğini belirtir.

Kural: {{ ifade| limitTo : sınır: başlancıç}}

Aşağıdaki örnek bu açıklamaya ait bir uygulamadır.

SCRIPT: Daha önceki örneklerden hatırlayacağınız gibi. Yukarıdaki modelimizi controllar yapımıza bağlıyoruz.  Modül, Controller ve model için gerekli olan kodları yazdık.

 

HTML: Filtre uygulamak için sayfaya bir tane text nesnesi(number) ekleyip ng-modeline satirSayisi ismini verdik. Bu modeli filtre içinde limitTo özelliğinine uygulayarak personel görünümün kaç satır olacağını belirleyeceğiz.

HTML kodlarının birleştirilmiş hali;

1- ng-repeat  ifadesinin içine ( | ) sembolü ile filtrenin eklendiğini ve satirSayisi modelinin parametre olarak geçirildi.

2-personel adı büyük karakter yapıldı.

3- tarih formatı gün/ay/yıl olarak düzeltildi.

4-maaş tl sembolü ve 2 ondalık basamak şeklide yapıldı.

5- maaş 2 ondalık basamak olacak şekilde sayı olarak düzenlendi.

 

ÖRNEK 2: Basit bir sayfalama uygulaması.  Yukarıdaki kodlara ek olarak modele kayitSayisi ve sayfaNo değerlerini ekledik. limitTo filitresinin limitTo:sınır:baslangıç şeklinde kullanıldığını biliyoruz.

sınır ifadesine her sayfada gösterilecek kayıtsayısı.

başangıç ifadesine de  sayfaNo*kayıtsayısı şeklinde kod uyguladığımızda text kutusundaki değişen her değer için bir sonraki sayfaya odaklanacaktır.

 

Sonraki yazıda Sıralama Filtresini İnceleyeceğiz.

 

 

AngularJS Örnek Uygulama

 

AngularJS ile ilgili diğer yazıları da okumak istermisiniz.

Hakkında Hayri

İlginizi Çekebilir

AngularJS Template (Asp.net WebService)

Bu yazıda oluşturduğumuz ürünler template sayfasını ile veri tabanındaki kayıtları birleştireceğiz. Öncelikle bilmeniz gereken bu …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir