Angular JS 4.Ders

Birazda view kısmına el atalım. Controller ımızda $scope kullanımının alttaki gibi olduğunu görmüştük.

function angularController($scope){

     $scope.uye = [{ isim : 'ahmet' }];

}

Ve ekrana {{ }} arasına istediğimiz scope u JSON şeklinde alıp yazarak çıktıyı görmüştük.

{{ uye.isim }}

Şimdi biraz filtreleri yani ekrana bastığımız yazılara uygulayabileceğimiz etkilere göz atalım.

1. filter
ng-repeat i hatırlarsanız sıralı bir veriyi istenilen elementte tüm verileri yazacak şekilde kullanabiliyorduk. Hemen bir örnek verelim.

Evet arabalardan anlamadığım anlaşılmıştır sanırım. arabalar isimli bir JSON oluşturup onu ng-repeat ile li elementine yazdırdık. Peki bir inputtan alınan text e göre bunları nasıl yazdırabiliriz? İşte bunu filter filtresi sayesinde yapacağız. Yani görmek istediklerimizi göreceğiz yani.

İşte arama yapıp istenen sonucu döndürmek bu kadar kolay.

2. currency
Sayılara uygulanan bu filtre ile sayımızın başına varsayılan olarak bir dolar sembolü geliyor. Ama yeni bir para birimi tanımlayabiliyoruz. Evet örneğimizi görelim.

3. number
Sayıların virgülden sonraki kısmın görünüp görünmemesini,kaç basamağının görünmesi bu filtre ile kontrol ediyoruz. 4. lowercase ve uppercase
String leri tamamen küçük yada büyük harf yapmaya yarayan filtreler. 5. limitTo
Herhangi array yada string in istenilen indise kadar yazılmasını bu filtre ile sağlıyoruz.
6. orderBy
orderBy istediğiniz dizeyi seçtiğiniz indise göre ki bu indisin harfler yada rakamlardan oluşması farketmez büyükten küçüğe yada küçükten büyüğe sıralar. Mesela 2014 Dünya Kupası kurralarında 4. torbadan çıkan takımları sıralayalım. orderBy varsayılan olarak küçükten büyüğe sıralar. Select oluşturup sıralamanın nasıl olacağının seçilmesini sağladık. ng-repeat te orderBy a hangi indise göre sıralamasını istediğimizi bildirdik. Ve option da gördüğünüz gibi indisin başına - yazdığımızda büyükten küçüğe sıralamasını sağladık. Ve birde sayıların sıralanmasına örnek verelim. Harf sayılarına göre sıralanmasını örnek verdim.

Ve dizimizin random şekilde sıralanması ise bu şekilde.Eğer farklı indislere göre sıralama yapmak istiyorsanız orderBy:['1.indis','2.indis'..] gibi yazarak bunu yapabilirsiniz.
7. date
Milisaniye olarak verilen tarihi istenilen formata bu filtre ile dönüştürüyoruz. Javascript teDate.now() fonksiyonu milisaniye olarak zamanı return ediyor ve bunu kullanarak filtrelerimizi görelim.
Tüm filtreleri örnekler ile anlatmaya çalıştım. Umarım faydalı olmuştur. Bir sonraki derste görüşmek üzere.