En son web geliştirme öğreticiler
 

AngularJS Filtreler

❮ Önceki Sonraki Bölüm ❯

Filtreler biçimi verilerine angularjs ilave edilebilir.

Filtreler angularjs

Angularjs verileri dönüştürmek için filtreleri içerir:

  • currency bir para birimi biçiminde bir numara biçimlendirin.
  • date Biçimi belirtilen bir biçime bir tarih.
  • filter bir diziden öğe bir alt kümesini seçin.
  • json bir JSON dizeye bir nesne biçimlendirin.
  • limitTo elemanları / karakter belirtilen sayıda bir dizi / dize sınırlar.
  • lowercase Biçim harfe bir dize.
  • number bir dizeye bir sayı biçimlendirin.
  • orderBy bir ifade ile, bir dizi emir gönderir.
  • uppercase Biçim harfe bir dize.

İfadelerin Filtreler'ini ekleme

Filtreler boru karakterini kullanarak ifadeler eklenebilir | Bir filtre ve ardından.

uppercase büyük harfe filtre biçim dizeleri:

Örnek

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

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

</div>
Kendin dene "

lowercase küçük harf filtre biçim dizeleri:

Örnek

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

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

</div>
Kendin dene "

Direktifler Filtreler'ini ekleme

Filtreler gibi direktifleri eklenir ng-repeat , boru karakterini kullanarak | Bir filtre ve ardından:

Örnek

orderBy filtresi, bir dizi 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>
Kendin dene "

para Filtre

currency filtre para birimi olarak bir sayı biçimleri:

Örnek

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

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

</div>
Kendin dene "

Bizim para filtresi hakkında daha fazlasını okuyun angularjs para Filtre Referans

filtre filtre

filter filtre, bir dizinin bir alt kümesini seçmektedir.

filter filtre yalnızca diziler kullanılabilir ve sadece uygun ürün içeren bir dizi döner.

Örnek

Harfi içeren isimleri Dönüş "i" :

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

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

</div>
Kendin dene "

Bizim filtre filtresi hakkında daha fazlasını okuyun angularjs filtre Filtre Referans

Kullanıcı Girişi dayanarak bir Array Filter

Ayarlayarak ng-model bir giriş alanına yönergesi, bir filtre olarak bir ifade olarak giriş alanının değeri kullanabilir.

giriş alanına bir harf yazın ve liste / küçültmek maçın bağlı büyüyecek:

  • {{X}}

Ö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>
Kendin dene "

Kullanıcı Girişi dayanarak bir Array sıralama

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

isim ülke
{{X.name}} {{X.country}}

Ekleyerek ng-click tablo başlıklarındaki yönergesini, biz dizinin sıralama düzenini değiştiren bir işlevi çalıştırabilirsiniz:

Ö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>
Kendin dene "

Özel Filtreler

Eğer modülü ile yeni bir filtre fabrikası işlevini kayıt olarak kendi filtrelerini yapabilirsiniz:

Örnek

Denilen özel bir filtre olun "myFormat" :

<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>
Kendin dene "

myFormat filtresi her karakter büyük harfe biçimlendirir.


❮ Önceki Sonraki Bölüm ❯