AngularJS Filtre

AngularJS'te verileri formatlamak için filtre ekleyebilirsiniz.

AngularJS Filtre

AngularJS, verileri dönüştürmek için filtreler sağlar:

• currency Sayıyı para formatına dönüştürmek
• date Tarihi belirli bir formatta formatlamak
• filter Bir dizgeden bir alt dizge seçmek
• json Bir nesneyi JSON dizgesine dönüştürmek
• limitTo Dizgeyi/soyut bir dizgeyi belirli sayıda eleman/sembol sınırlamak
• lowercase Dizgeyi küçük harflere dönüştürmek
• number Sayıyı dizgeye dönüştürmek
• orderBy Dizgeyi ifade aracılığıyla sıralamak
• uppercase Dizgeyi büyük harflere dönüştürmek

Bir ifadeye bir filtre eklemek

Bir ifadeye bir filtre eklemek için çizgi işareti | kullanabilirsiniz, ardından bir filtre.

uppercase Filtre, dizgeyi büyük harflere dönüştürür:

Örnek

<div ng-app="myApp" ng-controller="personCtrl">
<p>Ad soyadı {{ lastName | uppercase }}</p>
</div>

Kendi Kendine Deneyin

lowercase Filtre, dizgeyi küçük harflere dönüştürür:

Örnek

<div ng-app="myApp" ng-controller="personCtrl">
<p>Ad soyismi {{ lastName | lowercase }}</p>
</div>

Kendi Kendine Deneyin

Filtre eklemek için komuta

Tünel karakteri kullanılarak | Filtre ekleme, aşağıdaki gibi komutlara eklenir, örneğin ng-repeat：

Örnek

orderBy filtresi dizini sıralar:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>
</div>

Kendi Kendine Deneyin

currency filtresi

currency Filtre, sayıları para formatına dönüştürür:

Örnek

<div ng-app="myApp" ng-controller="costCtrl">
<h1>Price: {{ price | currency }}</h1>
</div>

Kendi Kendine Deneyin

currency filtresi hakkında daha fazla bilgi için AngularJS currency filtresi referans el kitabımıza bakın.

filter filtresi

filter Filtreler dizinin alt kümesini seçer.

filter Filtreler sadece dizinler için kullanılabilir, sadece eşleşen öğeleri içeren dizin döndürür.

Örnek

Harf "i" içeren isimleri döndürür:

<div ng-app="myApp" ng-controller="namesCtrl">
<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>
</div>

Kendi Kendine Deneyin

filter filtresi hakkında daha fazla bilgi için AngularJS filter filtresi referans el kitabımıza bakın.

Kullanıcı girdisine göre dizini filtrelemek

Girdi alanına bir değer atanarak ng-model Komut, girdi alanının değerini filtredeki ifadesi olarak kullanabiliriz.

Girdi alanına bir harf girin, liste eşleşen öğelere göre daraltılır / genişletilir:

• Jani
• Carl
• Margareth
• Hege
• Joe
• Gustav
• Birgit
• Mary
• Kai

Örnek

<div ng-app="myApp" ng-controller="namesCtrl">
<p><input type="text" ng-model="test"></p>
<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>
</div>

Kendi Kendine Deneyin

Kullanıcı girdisine göre dizini sıralamak

Sütun başına tıklamak, sıralama düzenini değiştirebilir:

Sütun başına eklenerek ng-click Komut, bir fonksiyon çalıştırabiliriz, bu fonksiyon dizinin sıralama düzenini değiştirecektir:

Örnek

<div ng-app="myApp" ng-controller="namesCtrl">
<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  };
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>

Kendi Kendine Deneyin

Özelleştirilmiş süzgeç

Kendi süzgecinizi oluşturmak için modüle yeni bir süzgeç fabrika fonksiyonu kaydedebilirsiniz:

Örnek

Bir bir "myFormat" adlı özelleştirilmiş süzgeci oluştur:

<ul ng-app="myApp" ng-controller="namesCtrl">
  <li ng-repeat="x in names">
    {{x | myFormat}}
  </li>
</ul>
<script>
var app = angular.module('myApp', []);
app.filter('myFormat', function() {
  return function(x) {}}
    var i, c, txt = "";
    for (i = 0; i < x.length; i++) {
      c = x[i];
      if (i % 2 == 0) {
        c = c.toUpperCase();
      }
      txt += c;
    }
    return txt;
  });
});
app.controller('namesCtrl', function($scope) {
  $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>

Kendi Kendine Deneyin

myFormat Filtre, her iki karakteri büyük harfe dönüştürür.