AngularJS'de Filtre nedir?
AngularJS'deki bir Filtre , orijinal biçimi değiştirmeden kullanıcıya gösterilecek bir ifadenin değerini biçimlendirmeye yardımcı olur. Örneğin, dizenizin küçük veya büyük harf olmasını istiyorsanız, bunu filtreleri kullanarak yapabilirsiniz. Küçük harf ve büyük harf çıktısını buna göre alabilen "küçük harf", "büyük harf" gibi yerleşik filtreler vardır.
Benzer şekilde, sayılar için diğer filtreleri kullanabilirsiniz.
Bu eğitim sırasında, Angular'da bulunan farklı standart yerleşik filtreleri göreceğiz.
Bu eğitimde öğreneceksiniz-
- AngularJS'de Küçük Harf Filtresi
- AngularJS'de Büyük Harf Filtresi
- AngularJS'de Sayı Filtresi
- AngularJS'de Para Birimi Filtresi
- AngularJS'de JSON Filtresi
AngularJS'de Küçük Harf Filtresi
Bu filtre bir dize çıktısını alır ve dizeyi biçimlendirir ve dizedeki tüm karakterleri küçük harf olarak görüntüler.
AngularJS tolowercase seçeneği ile AngularJS filtrelerinin bir örneğine bakalım.
Aşağıdaki örnekte, bir görünüme kapsam nesnesi aracılığıyla bir dize göndermek için bir denetleyici kullanacağız. Daha sonra dizeyi küçük harfe dönüştürmek için görünümde bir filtre kullanacağız.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | lowercase}}
Kod Açıklaması:
- Burada, "tutorialName" adlı bir üye değişkeninde küçük ve büyük harflerin birleşimi olan bir dizeyi geçiriyoruz ve bunu kapsam nesnesine ekliyoruz. Aktarılan dizenin değeri "AngularJS" dir.
- Üye değişkeni "tutorialName" kullanıyoruz ve çıktının bir filtre kullanılarak değiştirilmesi gerektiği anlamına gelen bir filtre sembolü (|) koyuyoruz. Daha sonra, tüm dizeyi küçük harfle çıkarmak için yerleşik filtreyi kullanmayı söylemek için küçük harfli anahtar kelimeyi kullanırız.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Küçük ve büyük harflerin birleşimi olan tutorialName değişkeninde geçen "AngularJS" dizesinin çalıştırıldığı görülebilir.
- Yürütmeden sonra, son çıktı yukarıda gösterildiği gibi küçük harflidir.
AngularJS'de Büyük Harf Filtresi
Bu filtre, küçük harf filtresine benzer; fark, bir dize çıktısını alıp dizeyi biçimlendirmesi ve dizedeki tüm karakterleri büyük harf olarak görüntülemesidir.
Küçük harf seçeneği ile AngularJS büyük harf filtresi örneğine bakalım.
Aşağıdaki AngularJS capitalize örneğinde, osiloskop nesnesi aracılığıyla bir görünüme bir dize göndermek için bir denetleyici kullanacağız. Daha sonra dizeyi büyük harfe dönüştürmek için görünümde bir filtre kullanacağız.
Event Registration Guru99 Global Event
Tutorial Name :
This tutorial is {{tutorialName | uppercase}}
Kod Açıklaması:
- Burada, "tutorialName" adlı bir üye değişkeni içinde küçük ve büyük harfli "Angular JS" karakterlerinin birleşiminden oluşan bir dizeyi geçirip bunu kapsam nesnesine ekliyoruz.
- Üye değişkeni "tutorialName" kullanıyoruz ve bir filtre simgesi (|) koyuyoruz, bu da çıktının bir filtre kullanılarak değiştirilmesi gerektiği anlamına gelir. Daha sonra tüm dizeyi büyük harfle çıkarmak için yerleşik filtreyi kullanmayı söylemek için büyük harf anahtar kelimesini kullanırız.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Küçük ve büyük harfli karakterlerin birleşimi olan tutorialName değişkeninde geçirilen dizgenin tamamı büyük harfle çıktı olarak görülebilmektedir.
AngularJS'de Sayı Filtresi
Bu filtre, bir sayıyı biçimlendirir ve bir sayı için ondalık noktalara bir sınır uygulayabilir.
Sayı seçeneği ile AngularJS filtrelerinin bir örneğine bakalım.
Aşağıdaki örnekte,
2 ondalık basamaklı bir kısıtlama ile görüntülenecek bir sayıyı biçimlendirmek için sayı filtresini nasıl kullanabileceğimizi göstermek istedik.
Skop nesnesi aracılığıyla bir görünüme numara göndermek için bir kontrolör kullanacağız. Ardından, sayı filtresini uygulamak için görünümde bir filtre kullanacağız.
Event Registration Guru99 Global Event
This tutorialID is {{tutorialID | number:2}}
Kod Açıklaması:
- Burada, tutorialID adlı bir üye değişkeninde daha fazla sayıda ondalık basamağa sahip bir sayı geçiriyor ve bunu kapsam nesnesine ekliyoruz.
- Üye değişkeni tutorialID kullanıyoruz ve sayı filtresiyle birlikte bir filtre sembolü (|) koyuyoruz. Şimdi sayı olarak: 2, ikisi, filtrenin ondalık basamak sayısını 2 ile sınırlaması gerektiğini belirtir.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Çok sayıda ondalık basamağa sahip olan tutorialID değişkeninde geçirilen sayının, uygulanan 2 filtre sayısı nedeniyle 2 ondalık basamakla sınırlı olduğu görülmektedir.
AngularJS'de Para Birimi Filtresi
Bu filtre, bir para birimi filtresini bir sayıya göre biçimlendirir.
Diyelim ki, $ gibi bir para birimi olan bir sayıyı görüntülemek istiyorsanız, bu filtre kullanılabilir.
Aşağıdaki örnekte, osiloskop nesnesi aracılığıyla bir görünüme numara göndermek için bir kontrolör kullanacağız. Ardından, mevcut filtreyi uygulamak için görünümde bir filtre kullanacağız.
Event Registration Guru99 Global Event
This tutorial Price is {{tutorialprice | currency}}
Kod Açıklaması:
- Burada tutorialprice adlı bir üye değişkeninde bir sayı iletiyoruz ve bunu kapsam nesnesine ekliyoruz.
- Üye değişkeni öğretici fiyatı kullanıyoruz ve para birimi filtresiyle birlikte bir filtre simgesi (|) koyuyoruz. Uygulanan para biriminin makineye uygulanan dil ayarlarına bağlı olduğunu unutmayın.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Eğitim fiyatı değişkeninde aktarılan sayıya para birimi sembolünün eklendiği görülebilir.
- Bizim durumumuzda, dil ayarları İngilizce (Amerika Birleşik Devletleri) olduğundan, para birimi olarak $ sembolü eklenir.
AngularJS'de JSON Filtresi
Bu filtre, JSON benzeri bir girişi biçimlendirir ve JSON'da çıktı vermek için AngularJS JSON filtresini uygular.
Aşağıdaki örnekte, JSON türü bir nesneyi, kapsam nesnesi aracılığıyla bir görünüme göndermek için bir denetleyici kullanacağız. Daha sonra JSON filtresini uygulamak için görünümde bir filtre kullanacağız.
Event Registration Guru99 Global Event
This tutorial is {{tutorial | json}}
Kod Açıklaması:
- Burada "tutorial" adlı bir üye değişkeni içinde bir sayı aktarıyoruz ve bunu kapsam nesnesine ekliyoruz. Bu üye değişkeni, Eğitim Kimliği: 12 ve EğitimAdı: "Angular" şeklinde bir JSON türü dizesi içerir.
- Üye değişken eğitimini kullanıyoruz ve JSON filtresi ile birlikte bir filtre sembolü (|) koyuyoruz.
Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.
Çıktı:
Çıktıdan
- Bir dizge gibi JSON'un ayrıştırıldığı ve tarayıcıda uygun bir JSON nesnesi görüntülendiği görülebilir.
Özet:
- Filtreler, çıktının kullanıcıya görüntülenme şeklini değiştirmek için kullanılır.
- Angular, dizelerin çıkışını sırasıyla küçük ve büyük harfe değiştirmek için küçük harf ve büyük harf filtreleri gibi yerleşik filtreler sağlar.
- Sayıda görüntülenecek ondalık nokta sayısını belirterek sayı filtresini kullanarak sayıların görüntülenme şeklini değiştirmek için bir hüküm de vardır.
- Para birimi simgesini herhangi bir sayıya eklemek için para birimi filtresi de kullanılabilir.
- Json'a özgü çıktıya sahip olma gereksinimi varsa, açısal, JSON benzeri dizeleri JSON biçimine filtrelemek için JSON filtresi de sağlar.