Bu yazıda, Angular'da sıkça kullanılan filtreleme bileşenlerinden bahsedeceğim. Bununla birlikte, Angular directive'leri içerisinde expression kullanımı ve harici bir dosyanın da scope verisi olarak kullanımı da örnek uygulamada yer alan konulardır.
Filtreleme bileşeşenleri,verinin istenilen şekilde kullanıcıya görüntülenmesi için kullanılan elemanlardır. Angular'da sıkça kullanılan filter'lara "orderBy" ve "filter"ı örnek verebiliriz. Mevcut filter component listesine ve ayrıntılı açıklamalarına [1]'den göz atabilirsiniz.
Filter'lar ile ilgili örneğe buradan erişebilir ve kod üzerinde çalışabilirsiniz.
Ben daha çok HTML kodu üzerinde duracağım. Ayrıntılı olarak yukarıdaki bağlantıdan göz atabilirsiniz.
var module1 = angular.module('module1',[]);
module1.controller('controller1',function($scope, $http){
$http.get('teams.json').success(function(data){
$scope.teams = data;
});
$scope.sortBy = 'fanCount';
$scope.reverse = true;
});
Yukarıdaki Javascript kodunda module1 isminde bir module, onun üzerinde controller1 isminde bir controller ve bu controller scope'unda da teams isminde bir değişken oluşturuluyor. teams içeriği ise, teams.json dosyasındaki veri ile dolduruluyor.
Ayrıca sıralamanın neye göre yapılacağını belirten sortBy ve artan/azalan şekilde sıralanacağını belirten reverse isminde değişkenler de $scope'da tanımlanıyor.
<html ng-app="module1">AngularJS Filters Example </html>
İlk olarak üzerinde durmak istediğim konu: Angular .js'inin kaynağı olarak
cdnjs üzerinde bulunan sürümü kullanılıyor. cdnjs, üzerinde popüler tüm javascript kütüphanelerini barından bir cdn(Content Delivery Network) hizmetidir.
cdnjs üzerinde bulunan sürümü kullanılıyor. cdnjs, üzerinde popüler tüm javascript kütüphanelerini barından bir cdn(Content Delivery Network) hizmetidir.
ng-controller="controller1": html'deki bu element'in içerisindeki tüm elementler için, ilgili .js'de oluşturulan controller1 isimli controller'ın kullanılacağı anlamına geliyor.
ng-model="searchText": filtreleme için kullanılacak elementler'den biri olan text field için controller scope'unda bir bir model oluşturuyor. Kısaca bu text field searchText olarak ifade ediliyor ve erişim bu isimle yapılacak.
ng-repeat="team in teams | filter:searchText: gösterilen veriler searchText değerine göre filtrelenerek gösterilecektir.
| orderBy:sortBy:reverse: filtrelenmiş veriler $scope'da tanımlanan sortBy'a göre sıralanacaktır. Bu değerler ilgili .json dosyasındaki object attribute isimleri olabilmektedir. reverse ise orderBy filter'ına gönderilecek ikinci parameterdir(true|false) ve sıralamanın artan veya azalan olduğunu belirtmek için kullanılır.
ng-click="sortBy='name'; reverse=!reverse": burada javascript expression'larının da Angular directive'leri içerisinde kullanılabildiği görülmektedir. İlgili element'e tıklandığında $scope üzerindeki sortBy parameresi set ediliyor ve yukarıda bahsettiğim gibi sıralama bu attribute'a göre yapılıyor. Buna ek olarak; reverse attribute'u bir önceki state'inin tersi şeklinde set ediliyor ve artan/azalan sıralama bu şekilde belirleniyor. Angular expression'lar ile ilgili detaylı bilgiye [2]'den ulaşabilirsiniz.
ng-click="sortBy='name'; reverse=!reverse": burada javascript expression'larının da Angular directive'leri içerisinde kullanılabildiği görülmektedir. İlgili element'e tıklandığında $scope üzerindeki sortBy parameresi set ediliyor ve yukarıda bahsettiğim gibi sıralama bu attribute'a göre yapılıyor. Buna ek olarak; reverse attribute'u bir önceki state'inin tersi şeklinde set ediliyor ve artan/azalan sıralama bu şekilde belirleniyor. Angular expression'lar ile ilgili detaylı bilgiye [2]'den ulaşabilirsiniz.
Referanslar
Hiç yorum yok:
Yorum Gönder