AngularJS Filters | AngularJS Filtre Kullanımı | Angular
Şimdi ise filter kavramı ile tanışıyoruz. Filter’ da bizi pek çok amelelikten kurtaracak bir servis.
Filter nasıl kullanılır, örnekleri vb. konularda kaynak bilgiyi Angular’ ın kendi sitesindeki https://docs.angularjs.org/api/ng/filter/filter ve https://docs.angularjs.org/guide/filter sayfalarından alabiliriz.
Uygulamanızın view’ ında pek çok yerde, backend’ ten timestamp olarak gelen tarih’ i, kullanıcının okuyabileceği şekilde basmanız gerekiyor. Bunu normalde, internetten bulduğunuz bir metodu projenize dahil edip, veri geldiği anda parse edip, DOM’ a yerleştirerek yapmak ilk akla gelen çözüm olacaktır. Keza 10larca başka çözüm de uygulayabilirsiniz. Ama kritik nokta şu, uyguladığınız heryerde bir parse işlemini yapacak yönlendirmeyi yazmak zorundasınız. Lakin bu işi direk view’ da tek bir işlemde daha sağlıklı olacaktır.
timestampToDate adında bir filter tanımladık, return function (timestamp) kısmında timestamp değişkeninde, filtereleyeceği değeri ele alıyor, gerisi ise filter ne yapacaksa o işi yapıyor ve elde ettiği sonucu return ediyor. Filter’ ın ne yaptığına takılmayın, konumuz bu değil. Ardından ben bu filter’ ı kullanmak istediğim her modelde | işaretinden sonra yazıyorum ve kullanıyorum. Bu kadar basit.
Kendi bu şekilde custom filter yazabildiğimiz gibi dahili filterlarıda kullanabiliriz.
Angular’ ın dahili date filtresini kullandık.
Şimdiye kadar hep bir modeli transform ettik. Fakat filterlar verileri order etmeye de yarıyor.
Aşağıdaki örnekte, verilerimizi ng-repeat ile loop ederken, objelerin country değerlerini alfabetik olarak sıralayarak bu işlemi gerçekleştiriyoruz.
Şimdiki örneğimizde ise, birden çok filtreyi aynı anda nasıl kullanabileceğimiz göreceğiz.
İsimleri country ye göre alfabetik olarak order ederken, arama modeline bağlı input a bir harf girerseniz, bu girilen değerin, repeat edilen dizide eşleşmeyen değerleri siliniyor. Keza aynı zamanda isimler uppercase filtresi ile büyük harfe çevriliyor.
Umarım filtreler hakkında temel kavramları kavramışsınızdır.
angularjs angularjs filters angularjs filtre	NEXT READING