AngularJS Filtreleri ve Örnekle AngularJS Özel Filtresi

AngularJS'de Filtre Nedir?

A AngularJS'de filtrele orijinal formatı değiştirmeden kullanıcıya gösterilecek bir ifadenin değerinin formatlanmasına yardımcı olur. Örneğin, dizenizin küçük veya büyük harf olmasını istiyorsanız, bunu filtreleri kullanarak yapabilirsiniz. Küçük harf ve büyük harf çıkışını buna göre alabilen 'küçük harf', 'büyük harf' gibi yerleşik filtreler vardır.

AngularJS Özel Filtresi

Bazen Angular'daki yerleşik filtreler, filtreleme çıktısına yönelik ihtiyaçları veya gereksinimleri karşılayamaz. Böyle bir durumda çıktıyı istenilen şekilde geçirebilecek bir AngularJS özel filtresi oluşturulabilir.

Benzer şekilde sayılar için diğer filtreleri kullanabilirsiniz. Bu eğitim sırasında Angular'da mevcut olan farklı standart yerleşik filtreleri göreceğiz.

AngularJS'de Özel Filtre Nasıl Oluşturulur

Aşağıdaki özel filtre AngularJS örneğinde, kapsam nesnesi aracılığıyla denetleyiciden görünüme bir dize ileteceğiz, ancak dizenin olduğu gibi görüntülenmesini istemiyoruz.

Dizeyi her görüntülediğimizde özel bir filtre geçireceğimizden emin olmak istiyoruz. angularjs, bu başka bir dize ekleyecek ve tamamlanan dizeyi kullanıcıya gösterecektir.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | Demofilter}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.filter('Demofilter',function(){
        return function(input)
        {
            return input + " Tutorial"
        }
    });

    app.controller('DemoController',function($scope){

        $scope.tutorial ="Angular";
     });

</script>

</body>
</html>

Kod Açıklama

Burada, öğretici adı verilen üye değişkeninde “Angular” dizesini geçirip onu kapsam nesnesine ekliyoruz.
Angular, özel filtremizi oluşturmak için kullanılabilecek filtre hizmetini sağlar. 'Demofilter' filtremize verilen isimdir.
Bu, AngularJS'deki özel filtrelerin tanımlandığı ve bir fonksiyonun döndürüldüğü standart yoldur. Bu işlev, özel filtreyi oluşturmak için özel kodu içeren işlevdir. Fonksiyonumuzda view’ımızdan filtreye geçen “Angular” stringini alıyoruz ve buna “Tutorial” stringini ekliyoruz.
Denetleyiciden görünüme aktarılan üye değişkenimiz üzerinde Demofilter'ımızı kullanıyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan,

Özel filtremizin uygulandığı ve
'Eğitim' kelimesi, öğretici değişkeninde geçirilen dizenin sonuna eklenmiştir.

AngularJS'de Küçük Harf Filtresi

Bu filtre bir dize çıktısı alır ve dizeyi biçimlendirir ve dizedeki tüm karakterleri küçük harf olarak görüntüler.

AngularJS'yi küçük harfe çevirme seçeneğiyle AngularJS filtrelerinin bir örneğine bakalım.

Aşağıdaki örnekte, kapsam nesnesi aracılığıyla bir görünüme bir dize göndermek için bir denetleyici kullanacağız. Daha sonra dizeyi küçük harfe dönüştürmek için görünümde bir filtre kullanacağız.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | lowercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Kod Açıklama

Burada “tutorialName” isimli üye değişkeninde küçük ve büyük harflerin birleşiminden oluşan bir stringi geçirip kapsam nesnesine iliştiriyoruz. Aktarılan stringin değeri “AngularJS”dir.
Üye değişkeni “tutorialName” kullanıyoruz ve bir filtre sembolü (|) koyuyoruz, bu da çıktının bir filtre kullanılarak değiştirilmesi gerektiği anlamına geliyor. Daha sonra, dizenin tamamını küçük harfle çıkarmak için yerleşik filtreyi kullanmak üzere küçük harf anahtar sözcüğünü kullanırız.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan

Küçük ve büyük harflerin birleşiminden oluşan öğreticiAdı değişkeninde geçirilen “AngularJS” dizisinin çalıştırıldığı görülmektedir.
Yürütmeden sonra nihai çıktı yukarıda gösterildiği gibi küçük harfle yazılır.

AngularJS'de Büyük Harf Filtresi

Bu filtre küçük harf filtresine benzer; fark, bir dize çıktısı alması ve dizeyi biçimlendirmesi ve dizedeki tüm karakterleri büyük harf olarak görüntülemesidir.

AngularJS filtresini küçük harf seçeneğiyle büyük harfe çevirme örneğine bakalım.

Aşağıdaki AngularJS büyük harf kullanımı örneğinde, kapsam nesnesi aracılığıyla bir görünüme bir dize göndermek için bir denetleyici kullanacağız. Daha sonra dizeyi büyük harfe dönüştürmek için görünümde bir filtre kullanacağız.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

    <h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
    Tutorial Name : <input type="text" ng-model="tutorialName"><br>
    <br>
    This tutorial is {{tutorialName | uppercase}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialName ="Angular JS";
    });
</script>

</body>
</html>

Kod Açıklama

Burada “tutorialName” isimli üye değişkeninde “Angular JS” küçük ve büyük harflerin birleşiminden oluşan bir stringi geçirip, kapsam nesnesine iliştiriyoruz.
Üye değişkeni “tutorialName” kullanıyoruz ve bir filtre sembolü (|) koyuyoruz, bu da çıktının bir filtre kullanılarak değiştirilmesi gerektiği anlamına geliyor. Daha sonra, dizenin tamamını büyük harfle çıkarmak için yerleşik filtreyi kullanmak üzere büyük harf anahtar sözcüğünü kullanırız.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan,

Küçük harf ve büyük harf karakterlerin birleşiminden oluşan öğreticiAdı değişkeninde geçirilen dizenin tamamının büyük harfle çıkarıldığı görülebilir.

AngularJS'de Sayı Filtresi

Bu filtre bir sayıyı biçimlendirir ve bir sayının ondalık basamaklarına bir sınır uygulayabilir.

Sayı seçeneğiyle AngularJS filtrelerinin bir örneğine bakalım.

Aşağıdaki örnekte,

Bir sayıyı 2 ondalık basamak kısıtlamasıyla görüntülenecek şekilde biçimlendirmek için sayı filtresini nasıl kullanabileceğimizi göstermek istedik.

Kapsam nesnesi aracılığıyla bir görünüme sayı göndermek için bir denetleyici kullanacağız. Daha sonra sayı filtresini uygulamak için görünümde bir filtre kullanacağız.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorialID is {{tutorialID | number:2}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialID =3.565656;
    });
</script>

</body>
</html>

Kod Açıklama

Burada, öğreticiID adı verilen üye değişkeninde daha fazla sayıda ondalık basamağa sahip bir sayıyı geçirip kapsam nesnesine iliştiriyoruz.
TutorialID üye değişkenini kullanıyoruz ve sayı filtresinin yanına bir filtre simgesi (|) koyuyoruz. Şimdi sayı:2'de bu ikisi, filtrenin ondalık basamak sayısını 2 ile sınırlaması gerektiğini belirtir.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan,

Çok sayıda ondalık basamağa sahip olan öğreticiID değişkeninde geçirilen sayının, uygulanan sayı: 2 filtreden dolayı virgülden sonra 2 basamakla sınırlandırıldığı görülmektedir.

AngularJS'de Para Birimi Filtresi

Bu filtre, para birimi filtresini bir sayıya biçimlendirir.

Diyelim ki, $ gibi bir para birimine sahip bir sayıyı görüntülemek istiyorsanız bu filtreyi kullanabilirsiniz.

Aşağıdaki örnekte, kapsam nesnesi aracılığıyla bir görünüme sayı göndermek için bir denetleyici kullanacağız. Daha sonra mevcut filtreyi uygulamak için görünümde bir filtre kullanacağız.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial Price is {{tutorialprice | currency}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorialprice =20.56;
    });
</script>

</body>
</html>

Kod Açıklama

Burada, öğreticiprice adı verilen üye değişkenindeki bir sayıyı geçirip kapsam nesnesine ekliyoruz.
Tutorialprice üye değişkenini kullanıyoruz ve para birimi filtresinin yanına bir filtre simgesi (|) koyuyoruz. Uygulanan para biriminin makineye uygulanan dil ayarlarına bağlı olduğunu unutmayın.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan

Tutorialprice değişkeninde aktarılan sayıya para birimi simgesinin eklendiği görülebilir.
Bizim durumumuzda dil ayarları İngilizce (Amerika Birleşik Devletleri) olduğundan, para birimi olarak $ simgesi eklenmiştir.

AngularJS'de JSON Filtresi

Bu filtre, bir JSON girdiyi beğenin ve çıktıyı JSON cinsinden vermek için AngularJS JSON filtresini uygulayın.

Aşağıdaki örnekte, JSON tipi bir nesneyi kapsam nesnesi aracılığıyla bir görünüme göndermek için bir denetleyici kullanacağız. Daha sonra JSON filtresini uygulamak için görünümde bir filtre kullanacağız.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<h1> Guru99 Global Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">

    This tutorial is {{tutorial | json}}

</div>
<script type="text/javascript">
    var app = angular.module('DemoApp',[]);
    app.controller('DemoController',function($scope){

        $scope.tutorial ={TutorialID:12,tutorialName:"Angular"};
    });
</script>

</body>
</html>

Kod Açıklama

Burada “tutorial” adı verilen üye değişkenindeki bir sayıyı geçirip kapsam nesnesine iliştiriyoruz. Bu üye değişkeni JSON tipinde Öğretici Kimliği:12 ve ÖğreticiAdı:”Angular” dizesini içerir.
Üye değişkeni öğreticisini kullanıyoruz ve JSON filtresinin yanına bir filtre simgesi (|) koyuyoruz.

Kod başarıyla yürütülürse, kodunuzu tarayıcıda çalıştırdığınızda aşağıdaki Çıktı gösterilecektir.

Çıktı:

Çıktıdan,

Bir dize gibi JSON'un ayrıştırıldığı ve tarayıcıda uygun bir JSON nesnesi görüntülendiği görülebilir.

ÖZET

Filtreler, çıktının kullanıcıya gösterilme şeklini değiştirmek için kullanılır.
Angular, dizelerin çıktısını sırasıyla küçük ve büyük harf olarak değiştirmek için küçük harf ve büyük harf filtreleri gibi yerleşik filtreler sağlar.
Ayrıca sayıda görüntülenecek ondalık basamakların sayısını belirleyerek sayı filtresini kullanarak sayıların görüntülenme şeklini değiştirmeye yönelik bir hüküm de mevcuttur.
Para birimi sembolünü herhangi bir sayıya eklemek için para birimi filtresini de kullanabilirsiniz.
JSON'a özgü çıktıya sahip olma gereksinimi varsa, angular ayrıca JSON benzeri herhangi bir dizeyi JSON formatına filtrelemek için JSON filtresini de sağlar.
Angular'da tanımlanan filtrelerden herhangi birinin karşılamadığı bir gereksinim varsa, o zaman özel filtrenizi oluşturabilir ve özel kodunuzu ekleyerek filtreden istediğiniz çıktı türünü belirleyebilirsiniz.

AngularJS'de Filtre Nedir?

AngularJS Özel Filtresi

AngularJS'de Özel Filtre Nasıl Oluşturulur

Kod Açıklama

İLGİLİ MAKALELER

AngularJS'de Küçük Harf Filtresi

Kod Açıklama

AngularJS'de Büyük Harf Filtresi

Kod Açıklama

AngularJS'de Sayı Filtresi

Kod Açıklama

AngularJS'de Para Birimi Filtresi

Kod Açıklama

AngularJS'de JSON Filtresi

Kod Açıklama

ÖZET

Haber bültenine kaydolun