HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

AngularJS Filtreleri

❮ Öncesi Sonraki ❯

AngularJS'de verileri biçimlendirmek için filtreler eklenebilir.

AngularJS Filtreleri

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

  • currency Bir sayıyı para birimi biçimine biçimlendirin.
  • date Bir tarihi belirli bir biçime biçimlendirin.
  • filter Bir diziden öğelerin bir alt kümesini seçin.
  • json Bir nesneyi bir JSON dizesine biçimlendirin.
  • limitTo Bir diziyi/dizeyi belirtilen sayıda öğe/karakterle sınırlar.
  • lowercase Bir dizeyi küçük harfe biçimlendirin.
  • numberBir sayıyı bir dizeye biçimlendirin.
  • orderByBir diziyi bir ifadeye göre sıralar.
  • uppercaseBir dizeyi büyük harfe biçimlendirin.

İfadelere Filtre Ekleme

|Düz çizgi karakteri ve ardından bir filtre kullanılarak ifadelere filtreler eklenebilir .

Filtre uppercasebiçimi dizeleri büyük harfe dönüştürür:

Örnek

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>

Filtre lowercasebiçimi dizeleri küçük harfe dönüştürülür:

Örnek

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>

Direktiflere Filtre Ekleme

ng-repeatDirektiflere, boru karakteri |ve ardından bir filtre kullanılarak filtreler eklenir :

Örnek

Filtre orderBybir diziyi 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>

para birimi Filtresi

Filtre currency, bir sayıyı para birimi olarak biçimlendirir:

Örnek

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>

AngularJS para birimi Filtre Referansımızda para birimi filtresi hakkında daha fazla bilgi edinin.

Filtre Filtresi

Filtre filter, bir dizinin alt kümesini seçer.

Filtre filteryalnızca dizilerde kullanılabilir ve yalnızca eşleşen öğeleri içeren bir dizi döndürür.

Örnek

"i" harfini içeren isimleri döndürün:

<div ng-app="myApp" ng-controller="namesCtrl">

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

</div>

AngularJS filtre Filtre Referansımızda filtre filtresi hakkında daha fazla bilgi edinin.

Kullanıcı Girdisine Göre Dizi Filtreleme

Yönergeyi bir girdi alanına ayarlayarak, ng-modelgirdi alanının değerini bir filtrede ifade olarak kullanabiliriz.

Giriş alanına bir harf yazın, liste eşleşmeye bağlı olarak küçülür/büyür:

  • 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>

Kullanıcı Girdisine Göre Dizi Sıralama

Sıralama düzenini değiştirmek için tablo başlıklarına tıklayın::

İsim Ülke
Jani Norveç
Carl İsveç
Margareth İngiltere
hege Norveç
Joe Danimarka
Gustav İsveç
Birgit Danimarka
Mary İngiltere
Kai Norveç

Direktifi tablo başlıklarına ekleyerek ng-clickdizinin sıralama düzenini değiştiren bir fonksiyon çalıştırabiliriz:

Ö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>

Özel Filtreler

Modülünüze yeni bir filtre fabrikası işlevi kaydederek kendi filtrelerinizi yapabilirsiniz:

Örnek

"myFormat" adlı özel bir filtre yapın:

<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>

Filtre myFormat, diğer her karakteri büyük harfe biçimlendirir.


❮ Öncesi Sonraki ❯