AngularJS’de Özel Filtre Oluşturma

Önceki yazılarımızdan AngularJS’de Filtreler isimli makalemde AngularJS’de bulunan hazır filtrelere değinmiştik. İşlevsel olarak bu filtrelerin yetersiz kaldığı yahut sınırlarının dışında olan bir eylemi gerçekleştirmek için kendi özel filtrelerimizi oluşturmamız gerekmektedir. İşte bu makalemizde AngularJS’de özel filtrelerin nasıl oluşturulacağından bahsedeceğiz.

Yazımızın derinliklerine dalmadan önce bazı noktaları aydınlatmakta fayda görüyorum. Teknik olarak özel filtre tanımlayacaksak eğer bunun bir sınırlaması olmasa gerektir. Doğal olarak pratikte sınırsız esnekliğe sahip olan bu konuyu ben üç tip ile sınırlamaktayım. Neden mi? Çünkü; analizlerim doğrultusunda ihtiyaca binaen üç tip özel filtre oluşturulduğu kanaatine varmış bulunmaktayım.

Oluşturacağımız özel filtre tiplerini aşağıdaki gibi genel başlıklar halinde gruplayabiliriz.

  • Static(Tek) Kullanımlık Filtreler
  • Repeat İçin Filtreler
  • Argümansal/Parametrik Repeat İçin Filtreler

Şimdi herşeyden önce genel olarak bir özel filtre nasıl tanımlanır inceleyelim. Ardından yukarıdaki üç farklı tipte filtreleri tek tek ele alıp konumuzu nihayete erdirelim.

Özel filtreleri modüle bağlı “filter” fonksiyonu ile oluşturabilmekteyiz. Genel prototip aşağıdaki gibi olacaktır.

        angular.module("OrnekModul", []).filter("OrnekFiltre", function () {
            return function (x, y, z) {
                return "---";
            };
        })

Modül fonksiyonu üzerinden “filter” fonksiyonu çağrılacak ve birinci parametresinde ilgili filtreye bir isim belirtilecek, ikinci parametrede ise işlevselliği gerçekleştirecek anonim bir fonksiyon tanımlanacaktır. Bu anonim fonksiyon içerisinde geriye bir fonksiyon return edilecek ve işlemler burada gerçekleştirilecektir. Bu özel filtrenin uygulandığı değeri “x” değişkeni yakalayacaktır. “y” ve “z” değişkenleri “:” operatörü ile verilecek olan parametrelerdir.

Bu prototipte oluşturduğumuz filtre yapısını hangi veri üzerinde kullanacaksak “|” operatörü tekrardan devreye girecektir.

Şimdi özel filtrelerimizi genel gruplar halinde tek tek ele alma zamanı geldi.

Static(Tek) Kullanımlık Filtreler

Tek(static) bir veri üzerinde özel filtre oluşturduğumuz durumlar bu kategoride incelenecektir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("ModulApp", []).filter("AdiBuyult", function () {
            return function (deger) {
                return deger.toUpperCase();
            };
        }).controller("ControllerApp", function ($scope) {
            this.Ad = "gençay yıldız";
        });
    </script>
</head>
<body ng-app="ModulApp" ng-controller="ControllerApp as personel">
    {{personel.Ad | AdiBuyult}}
</body>
</html>

Yukarıdaki kod bloğunu incelerseniz eğer “AdiBuyult” isimli bir özel filtre oluşturulmuştur. Bu filtre içeriğinde adından da anlaşılacağı üzere uygulanacağı değerin tüm karakterlerini büyük olacak şekilde biçimlendirecektir.

Benzer mantıkla ilgili değerin bir değişken üzerinde bulunma şartı gerekmemektedir. Aşağıdaki örneği inceleyiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("ModulApp", []).filter("AdiBuyult", function () {
            return function (deger) {
                return deger.toUpperCase();
            };
        });
    </script>
</head>
<body ng-app="ModulApp">
    {{"Gençay Yıldız" | AdiBuyult}}
</body>
</html>

Birden fazla parametrik filtreyide aşağıdaki gibi oluşturabilmekteyiz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("ModulApp", []).filter("Carp", function () {
            return function (deger, katsayi, us) {
                if (us == null)
                    us = 1;
                return Math.pow(deger * katsayi, us);
            };
        });
    </script>
</head>
<body ng-app="ModulApp">
    <input type="text" ng-model="Deger" /><br />
    {{Deger | Carp : 3 : 2 }}
</body>
</html>

AngularJS'de Özel Filtre Oluşturma
Görüldüğü üzere “Carp” isimli özel filtremiz inputa girilen değeri önce “3” değeri ile çarpmakta ve ardından sonucun karesini almaktadır.

Repeat İçin Filtreler

Elimizdeki veri kümelerini repeat ederken oluşturacağımız parametresiz özel filtreler bu kategoride incelenecektir.
Aşağıda bir personel listesi repeat edilirken cinsiyet bilgileri özel filtre sayesinde biçimlendirilmektedir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("ModulApp", []).filter("CinsiyetBelirle", function () {
            return function (lists) {
                //lists parametresi ile veri kümesi elde ediliyor.
                for (var i = 0; i < lists.length; i++) {
                    //Elemanlar döngü sayesinde tek tek elde edilerek
                    //cinsiyetleri kontrol ediliyor ve biçimlendiriliyor.
                    switch (lists[i].Cins) {
                        case 1:
                            lists[i].Cins = "Erkek";
                            break;
                        case 0:
                            lists[i].Cins = "Kadın";
                            break;
                    }
                }
                //Rezerve edilen veri kümesi son haliyle geri döndürülüyor.
                return lists;
            };
        }).controller("ControllerCinsiyet", function ($scope) {
            $scope.Personeller =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", Cins: 1 },
                    { Adi: "Melisa", SoyAdi: "Coner", Cins: 0 },
                    { Adi: "Elif", SoyAdi: "Şimşek", Cins: 0 },
                    { Adi: "Mehmet", SoyAdi: "Aslıbay", Cins: 1 },
                    { Adi: "Şule", SoyAdi: "Nemelazım", Cins: 0 }
                ];
        });
    </script>
</head>
<body ng-app="ModulApp" ng-controller="ControllerCinsiyet">
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Cinsiyet</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="personel in Personeller | CinsiyetBelirle">
                <td>{{personel.Adi}}</td>
                <td>{{personel.SoyAdi}}</td>
                <td>{{personel.Cins}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

AngularJS'de Özel Filtre Oluşturma

Argümansal/Parametrik Repeat İçin Filtreler

Elimizdeki veri kümelerini repeat ederken oluşturacağımız parametreli özel filtreler bu kategoride incelenecektir. Yukarıdaki filtre tipinden tek farkı repeat üzerinde parametre barındıran özel bir filtre oluşturulmasıdır.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("ModulApp", []).filter("CinsiyetBelirleveIsimSinirlandir", function () {
            return function (lists, stringlength) {
                //lists parametresi ile veri kümesi elde ediliyor.
                for (var i = 0; i < lists.length; i++) {
                    //Elemanlar döngü sayesinde tek tek elde edilerek
                    //cinsiyetleri kontrol ediliyor ve biçimlendiriliyor.
                    switch (lists[i].Cins) {
                        case 1:
                            lists[i].Cins = "Erkek";
                            break;
                        case 0:
                            lists[i].Cins = "Kadın";
                            break;
                    }
                    lists[i].Adi = lists[i].Adi.substring(0, stringlength);
                }
                //Rezerve edilen veri kümesi son haliyle geri döndürülüyor.
                return lists;
            };
        }).controller("ControllerCinsiyet", function ($scope) {
            $scope.Personeller =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", Cins: 1 },
                    { Adi: "Melisa", SoyAdi: "Coner", Cins: 0 },
                    { Adi: "Elif", SoyAdi: "Şimşek", Cins: 0 },
                    { Adi: "Mehmet", SoyAdi: "Aslıbay", Cins: 1 },
                    { Adi: "Şule", SoyAdi: "Nemelazım", Cins: 0 }
                ];
        });
    </script>
</head>
<body ng-app="ModulApp" ng-controller="ControllerCinsiyet">
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Cinsiyet</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="personel in Personeller | CinsiyetBelirleveIsimSinirlandir : 3">
                <td>{{personel.Adi}}</td>
                <td>{{personel.SoyAdi}}</td>
                <td>{{personel.Cins}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Yukarıdaki kod bloğunu incelerseniz eğer “CinsiyetBelirleveIsimSinirlandir” isimli özel filtremiz hem cinsiyetleri belirleme işlevini görmekte hem de verilen parametre değeri kadar ilgili personelin adında substring fonksiyonu ile değer göstermektedir.

AngularJS'de Özel Filtre Oluşturma

Umarım faydalı ve bilgilendirici bir yazı olmuştur.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Bunlar da hoşunuza gidebilir...

Bir Cevap Yazın

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

*

Copy Protected by Chetan's WP-Copyprotect.