Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

AngularJS’de Filtreler

Yazar: Gençay · 17 Mart 2018

Merhaba,

Bu içeriğimizde elimizdeki veriler üzerinde belirli filtreleme yapabilme imkanı sağlayan yönergeler üzerinde konuşacağız.

AngularJS’de kullanacağımız filtreler şunlardır;

Currency
Sayısal bir değeri döviz kuru olarak biçimlendirmek için kullanılmaktadır. Varsayılan olarak $(dolar) sembolüdür ve bunun yanında özel döviz kuru da tanımlanabilmektedir.
Filter
Kullanıcı tarafından girilen bir değere göre veri kümesinde filtreleme yapılabilmektedir.
Lowercase
Metinsel ifadelerin karakterlerini küçültür.
Uppercase
Metinsel ifadelerin karakterlerini büyültür.
Order By
Bir veri kümesinde belirli bir kolona/alana göre sıralama yapmak için kullanılır.
Number
Sayısal değerleri nokta ve virgül biçiminde gösterir ve ondalıklı formata getirmede kullanılır.
Date
Tarihsel değerleri biçimlendirmek için kullanılmaktadır.
LimitTo
Bir veri kümesi listelenirken baştan kaç adetinin listelemeye dahil edileceğini belirtmek için kullanılır.
JSON
Bir nesneyi json formatında biçimlendirir.

AngularJS’de filtreleme işlemi teknik boyutta aşağıdaki prototipte olduğu gibi genelleştirilebilir.

[İfade ya da Değer] | [Filtre Adı] : [Parametre]

Yukarıdaki prototipte gördüğünüz gibi filtre uygulayacağımız ifade/değer her ne ise “|” operatörüyle hangi filtreyi uygulayacaksak belirtmekte ve varsa “:” operatöründen sonra parametre verilmektedir.

Currency Filtresi

Sayısal değerleri döviz kuru olarak biçimlendirmek için kullanılan bir filtredir.
Aşağıdaki prototipte olduğu gibi kullanılmaktadır.

[Değer] | currency : Sembol : Küsürat

Örnek bir çalışma üzerinde göstermemiz gerekirse eğer;

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Sayi = 100">
        {{Sayi |currency}}
    </div>
</body>
</html>

kod bloğunu inceleyebilirsiniz.

Varsayılan olarak $ ifadesini kullanan currency filtresinin sembolünü aşağıdaki gibi değiştirebilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Sayi = 100">
        {{Sayi |currency : "TL"}}
    </div>
</body>
</html>

Eğer ki sayısal değerimiz ondalıklı sayı ise küsürat adedinide aşağıdaki gibi ayarlayabilirsiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <div ng-init="Sayi = 99.123">
        {{Sayi |currency : "TL" : 5}}
    </div>
</body>
</html>

Gördüğünüz gibi 99.123 değerinin küsüratı üç adetken, üçüncü parametrede belirtilen “5” değeri sayesinde .12300 şeklinde küsürat gösterilmektedir.

Filter Filteresi

Elimizdeki veri kümesinde filtreleme yapma işlevini görmektedir.
Prototipi aşağıdaki gibidir.

[repeat] | filter : [Değer] : [true/false]

Repeat edilen veri kümesinin yanına “|” operatörü eşliğinde filter komutu ile değer verilmekte ve bu değere eşleşen kayıtlar listelenmektedir. Eşleşmede, değerin veri listesindeki herhangi bir kolondaki değeriyle uyumlu olması varsayılmıştır. Bir kolona özel filtreleme işlemide gerçekleştirilebilir. true/false olarak tarif edilen parametre ise; filtreleme esnasında verilerin değeri kapsaması mı?(false) yoksa birebir eşit olması mı?(true) gerektiğini belirtmektedir.

Şimdi gelin güzel bir örnekle konuyu ele alalım.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("FilterModule", []).controller("FilterController", function ($scope) {
            var PersonelListesi =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", Yas: 26, Memleket: "Artvin" },
                    { Adi: "Mustafa", SoyAdi: "Klavuz", Yas: 25, Memleket: "Ankara" },
                    { Adi: "Ayşe", SoyAdi: "Hotin", Yas: 31, Memleket: "Mersin" },
                    { Adi: "Nurettin", SoyAdi: "Uzunsakal", Yas: 54, Memleket: "Çorum" },
                    { Adi: "Songül", SoyAdi: "Fitoz", Yas: 24, Memleket: "Artvin" },
                    { Adi: "Fatma", SoyAdi: "Yıldız", Yas: 23, Memleket: "Aydın" },
                    { Adi: "Gürol", SoyAdi: "Yıldız", Yas: 38, Memleket: "Artvin" },
                ];
            $scope.personelListesi = PersonelListesi;
        });
    </script>
</head>
<body ng-app="FilterModule" ng-controller="FilterController">
    <input type="text" placeholder="Filtre değeri" ng-model="arama" />
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | filter : arama">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Yukarıdaki örnek kod bloğunda personel listesi repeat edildiği noktada inputa bağlanan “arama” isimli model sayesinde filtrelendirilmektedir.

Bu şekilde filtreleme bir kolona özel yapılmamaktadır. Eğer ki kolona özel filtreleme yapmak istiyorsanız inputa bağlı olan modele kolonun adını property olarak eklemek yeterli olacaktır.


<body ng-app="FilterModule" ng-controller="FilterController">
    <input type="text" placeholder="Filtre değeri" ng-model="arama.Adi" />
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | filter : arama">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>

Görüldüğü üzere bu şekilde bir sadece “Adi” kolonuna özel bir filtreleme gerçekleştirilmektedir.

Şu ana kadar yaptığımız filtrelemelerde yazılan değeri kapsayan içerikler filtrelenmiştir. Ayrıca verilen değere birebir eşit olan değerlerin filtrelenmesini istiyorsak bool tipindeki üçüncü parametremiz devreye girmektedir.

<body ng-app="FilterModule" ng-controller="FilterController">
    <input type="text" placeholder="Filtre değeri" ng-model="arama" />
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | filter : arama : true">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>

Görüldüğü üzere değer direkt kolondaki değerle birebir eş değer olmadığı müddetçe herhangi bir veri gösterilmemektedir. Buradan da anlayacağımız bu üçüncü parametrenin varsayılan olarak false değerine sahip olduğudur.

Ve son olarak birden fazla değer üzerinde bir filtreleme işlemi yapmak istiyorsak eğer aşağıdaki gibi nesne üzerinden hareket edebiliriz.

<body ng-app="FilterModule" ng-controller="FilterController">
    <input type="text" placeholder="Filtre değeri - Adı" ng-model="adi" />
    <input type="text" placeholder="Filtre değeri - Memleketi" ng-model="memleket" />
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | filter : {Adi: adi, Memleket: memleket} : false">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>

Dikkat ederseniz “filter” komutuna sadece “Adi” ve “Memleket” propertylerinden oluşan bir nesne verilmektedir ve ilgili nesne property değerlerini inputlara bağlanan modellerden almaktadır.

Bu şekilde de birden çok alana ve birden çok değerle filtreleme işlemi uygulamış olmaktayız.

Lowercase Filtresi

Elimizdeki metinsel ifadelerin tüm karakterlerini küçültme işlevi görmektedir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <input type="text" ng-model="Deger" />
    <br />
    {{Deger | lowercase}}
</body>
</html>

Uppercase Filtresi

Benzer şekilde elimizdeki metinsel ifadenin tüm karakterlerini büyük olacak şekilde biçimlendirir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    <input type="text" ng-model="Deger" />
    <br />
    {{Deger | uppercase}}
</body>
</html>

Order By Filtresi

Bir veri kümesini belirli bir kolona/alana göre sıralamak için kullanılır.
Prototipi aşağıdaki gibidir.

[repeat] | orderBy : [Kolon/Alan] : [true/false ya da +/-]

Repeat komutuna “|” operatörü eşliğinde belirtilen orderBy komutu sayesinde hangi kolona/alana göre sıralama yapacağımızı belirleyebilmekteyiz. true/false olarak belirttiğim üçüncü parametrede ise yapılacak sıralamanın artan mı?(false) ya da azalan mı?(true) olarak ayarlanmasını sağlamaktadır. Tabi bu işlemler için de “+” veya “-” operatörleride aynı manayı ifade etmektedir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("FilterModule", []).controller("FilterController", function ($scope) {
            var PersonelListesi =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", Yas: 26, Memleket: "Artvin" },
                    { Adi: "Mustafa", SoyAdi: "Klavuz", Yas: 25, Memleket: "Ankara" },
                    { Adi: "Ayşe", SoyAdi: "Hotin", Yas: 31, Memleket: "Mersin" },
                    { Adi: "Nurettin", SoyAdi: "Uzunsakal", Yas: 54, Memleket: "Çorum" },
                    { Adi: "Songül", SoyAdi: "Fitoz", Yas: 24, Memleket: "Artvin" },
                    { Adi: "Fatma", SoyAdi: "Yıldız", Yas: 23, Memleket: "Aydın" },
                    { Adi: "Gürol", SoyAdi: "Yıldız", Yas: 38, Memleket: "Artvin" },
                ];
            $scope.personelListesi = PersonelListesi;
        });
    </script>
</head>
<body ng-app="FilterModule" ng-controller="FilterController">
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | orderBy : 'Adi'">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Yukarıdaki kod bloğunu incelerseniz eğer personeller listesi “Adi” kolonuna özel sıralanmaktadır.
Birden fazla kolon üzerinde sıralamayı ise aşağıdaki gibi yapabilmekteyiz.

        <tbody>
            <tr ng-repeat="Personel in personelListesi | orderBy : ['Memleket', 'Adi']">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>

Sıralamanın artan ya da azalan olduğunu da aşağıdaki gibi belirtmekteyiz.

        <tbody>
            <tr ng-repeat="Personel in personelListesi | orderBy : 'Adi' : true">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>

Tabi bu işlemi sıralama yapılacak kolon adının başına “+” ya da “-” ifadelerini kullanarakta gerçekleştirebiliriz.

        <tbody>
            <tr ng-repeat="Personel in personelListesi | orderBy : '-Adi'">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>

Number Filtresi

Sayısal ifadeleri ondalıklı hale getirmekte ve noktalı bir şekilde biçimlendirmektedir.
Prototipi aşağıdaki gibidir.

[Sayısal Değer] | number : [Küsürat]

Sayısal değer, uygulanan number komutu ile ondalıklı şekilde biçimlendirilmektedir ve küsüratı da istediğimiz şekilde ayarlanmaktadır.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    {{21313432 | number}}
</body>
</html>

Küsürat verdiğimizde ise;

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
</head>
<body ng-app="">
    {{21313432 | number : 2}}
</body>
</html>

Date Filtresi

Tarihsel değerleri biçimlendirmek için kullanılmaktadır. Aşağıda formatlama için belli başlı komutlar verilmiştir. Tüm format yapısını incelemek istiyorsanız şuradaki dökümanı incelemenizi tavsiye ederim.

Biçim	Çıktı
yyyy	Dört basamaklı yıl. Örn; 2018
yy	İki basamaklı yıl. Örn; 2018
MMMM	Metinsel ay. Örn; January
MMm	Sayısal ay. Sıfırlı. Örn; 09
M	Sayısal ay. Sıfırsız. Örn; 9
dd	Gün. Sıfırlı. Örn; 03
d	Gün. Sıfızsız. Örn; 3

Kullanım prototipi aşağıdaki şekildedir.

[Tarih] : date : [Format]

Şimdi aşağıdaki örneği inceleyiniz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            $scope.Tarih = new Date();
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    {{Tarih | date}}
</body>
</html>

Sonuç olarak o anın tarihini düzgün formatta yazdıracaktır.
Ya da aşağıdaki gibi kendi formatımızı da oluşturabiliriz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            $scope.Tarih = new Date();
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    {{Tarih | date : "dd.MM.y"}}
</body>
</html>

Formatın başına herhangi bir ekte ekleyebiliriz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            $scope.Tarih = new Date();
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    {{Tarih | date : "'Bu günün tarihi : ' dd.MM.y"}}
</body>
</html>

Tüm bunların dışında “fullDate” parametresini kullanarak elimizdeki tarihin tüm bilgilerini biçimlendirebiliriz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("Uygulama", []).controller("UygulamaController", function ($scope) {
            $scope.Tarih = new Date();
        });
    </script>
</head>
<body ng-app="Uygulama" ng-controller="UygulamaController">
    {{Tarih | date : "fullDate"}}
</body>
</html>

LimitTo Filtresi

Elimizdeki veri kümesini listelerken baştan ya da sondan kaç adedini bu listelemeye dahil edeceğimizi belirtiyoruz.
Prototipi aşağıdaki gibidir.

[Repeat] | limitTo : [Adet] : [Başlangıç]

Repeat esnasında limitTo ile belirtilen adet kadar veri listelenecektir. Başlangıç değeri ise atlanacak noktayı ifade etmektedir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("FilterModule", []).controller("FilterController", function ($scope) {
            var PersonelListesi =
                [
                    { Adi: "Gençay", SoyAdi: "Yıldız", Yas: 26, Memleket: "Artvin" },
                    { Adi: "Mustafa", SoyAdi: "Klavuz", Yas: 25, Memleket: "Ankara" },
                    { Adi: "Ayşe", SoyAdi: "Hotin", Yas: 31, Memleket: "Mersin" },
                    { Adi: "Nurettin", SoyAdi: "Uzunsakal", Yas: 54, Memleket: "Çorum" },
                    { Adi: "Songül", SoyAdi: "Fitoz", Yas: 24, Memleket: "Artvin" },
                    { Adi: "Fatma", SoyAdi: "Yıldız", Yas: 23, Memleket: "Aydın" },
                    { Adi: "Gürol", SoyAdi: "Yıldız", Yas: 38, Memleket: "Artvin" },
                ];
            $scope.personelListesi = PersonelListesi;
        });
    </script>
</head>
<body ng-app="FilterModule" ng-controller="FilterController">
    <table>
        <thead>
            <tr>
                <th>Adı</th>
                <th>Soyadı</th>
                <th>Yaşı</th>
                <th>Memleketi</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="Personel in personelListesi | limitTo : 3">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Gördüğünüz gibi personel listesinin ilk üç satırı listelemeye dahil edilmiştir.
Eğer ki listelemeye sondan müdahale etmek istiyorsanız parametreye verilen sayısal değerin başına “-” ifadesi konmalıdır.

        <tbody>
            <tr ng-repeat="Personel in personelListesi | limitTo : -3">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>

Eğer ki belirli satırları atlayıp limit belirlemek istiyorsak üçüncü parametre burada devreye girmektedir.

        <tbody>
            <tr ng-repeat="Personel in personelListesi | limitTo : 2 : 4">
                <td>{{Personel.Adi}}</td>
                <td>{{Personel.SoyAdi}}</td>
                <td>{{Personel.Yas}}</td>
                <td>{{Personel.Memleket}}</td>
            </tr>
        </tbody>

Görüldüğü üzere, dördüncü satıra kadar atlayıp sonraki iki adet satırı yazdırmış bulunmaktayız.

limitTo filtresini metinsel yapılar üzerinde de uygulayabilmekteyiz. Nihayetinde yazılımsal açıdan her metinsel ifade bir char dizisi olduğundan dolayı bu ve bu tarz işlemleri metinsel ifadelerde kullanabilmekteyiz.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("FilterModule", []).controller("FilterController", function ($scope) {
            $scope.Ad = "GençAy Yıldız";
        });
    </script>
</head>
<body ng-app="FilterModule" ng-controller="FilterController">
    {{Ad | limitTo : 9 : 4}}
</body>
</html>

JSON Filtresi

Bir nesneyi JSON formatında biçimlendirmemizi sağlamaktadır.
Prototipi aşağıdaki gibidir.

[Nesne] | json : [Aralık Değeri]

Prototipte tek anlaşılmayan husus aralık değeri olsa gerek ki onunda işlevi, oluşturulacak json değerinde ilgili özelliklerin ne kadar sağ tarafa atılmasıyla ilgilidir.

<!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script>
        angular.module("FilterModule", []).controller("FilterController", function ($scope) {
            var Model = {
                Adi: "Gençay",
                SoyAdi: "Yıldız",
                Memleket: "Artvin"
            };
            $scope.Model = Model;
        });
    </script>
</head>
<body ng-app="FilterModule" ng-controller="FilterController">
    {{Model | json}}
</body>
</html>

Evet arkadaşlar,
AngularJS frameworkünde kullanacağımız filtreler üzerinde elimden geldiğince detaylı açıklamalarda bulunmaya çalıştım. Eğer ki sizlerde bu yazıyı sonuna kadar okuyabilme cüretini gösterdiyseniz teşekkürlerimi sunarım 🙂

Bol bol faydalanmanız dileğiyle…
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…

Etiketler: AngularJS Date fullDate Currency Currency Filteresi Currency Filtresi Date Filter Filter Filteresi fullDate Filter JSON JSON Filtresi limitTo LimitTo Filtresi Lowercase Lowercase Filtresi Number Number Filtresi order by Order By Filtresi Uppercase Uppercase Filtresi

Bunlar da hoşunuza gidebilir...

AngularJS’de Özel Filtre Oluşturma | Yazılım Mimarileri ve Tasarım Desenleri Üzerine

20 Mart 2018

[…] yazılarımızdan AngularJS’de Filtreler isimli makalemde AngularJS’de bulunan hazır filtrelere değinmiştik. İşlevsel olarak bu […]