soru sor sorular uzmanlar

AngularJS Filtreler nedir?

alattin (17125) 8 yıl önce sordu

AngularJS Filters nedir?

AngularJS Filtreler ne işe yarar?

angularjs angularjs filter angularjs filtre angularjs temelleri angularjs nedir

Toplam 1 cevap

alattin (17125) 8 yıl önce cevapladı

AngularJS Filtreler nedir? AngularJS Filtreler ne işe yarar?

Filtreler AngularJS içinde verileri formatlamak için kullanılır. AngularJS'de şu filtreleri bize sağlar:

  • currency  bir sayıyı para birimine çevirir
  • date  tarihi formatlamak için kullanılır
  • filter diziler için kullanılır. Dizi içinden filte ifadesine uyan değerleri ayrı bir dizi olarak döndürür.
  • json bir nesneyi JSON formatına dönüştürür.
  • limitTo  Array veya string değer için belirli sayıda elementi almak için kullanılır
  • lowercase  string ifadeyi küçük harfe çevirir
  • uppercase string ifadeyi büyük harfe çevirir
  • number Sayı değeri string'e çevirir.
  • orderBy  sıralama için kullanılır

Filtreler {{ ifade | filtre}} şeklinde kullanılır.

 <div ng-app="">        
       {{ 'UZMANIM' | lowercase }}
 </div>

bu AngularJS ifadesinin çıktısı "uzmanim" olacaktır.

AngularJS currency filtresi için örnek:

<body ng-app="app">   
    <p ng-controller="ctrl">
        Fiyat {{fiyat |currency:"TR"}}
    </p>

    <script>
        var app = angular.module("app", []);
        app.controller('ctrl', function ($scope) {
            $scope.fiyat = 34;
        })
    </script>  

</body>

Yukarıdaki örnekte ekrana çıktı  Fiyat TR34.00 olacakır.

AngularJS filter filtresi için örnek:

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
</head>
<body ng-app="app">   
    <div ng-controller="ctrl">
       <h1>uzmanlar</h1>
        <ul>
            <li ng-repeat="u in uzmanlar | filter : 'm'">{{u}}</li>
        </ul>
    </div>

    <script>
        var app = angular.module("app", []);
        app.controller('ctrl', function ($scope) {
            $scope.uzmanlar = ['hakan', 'candan', 'temmuz', 'ismailsarp', 'araz01'];
        })
    </script>    

</body>
</html>

Yukarıdaki örnekte uzmanlar 'm' harfine göre filtrelenecektir. İçinde m harfi olan uzmanlar listelenecektir. Ekrana 

  • temmuz
  • ismailsarp 

gelecektir.