tutorial pengembangan web terbaru
 

AngularJS filter

❮ Sebelumnya Berikutnya Bab ❯

Filter dapat ditambahkan di AngularJS ke format data.

AngularJS Filter

AngularJS memberikan filter untuk mentransformasikan data:

  • currency Format nomor untuk format mata uang.
  • date Format tanggal ke format yang ditentukan.
  • filter Pilih subset dari item dari array.
  • json Format obyek ke string JSON.
  • limitTo Batas array / string, dalam jumlah tertentu elemen / karakter.
  • lowercase Format string untuk menurunkan kasus.
  • number Format nomor ke string.
  • orderBy Pesanan array oleh ekspresi.
  • uppercase Format string ke huruf besar.

Menambahkan Filter untuk Expressions

Filter dapat ditambahkan ke ekspresi dengan menggunakan karakter pipa | , diikuti oleh filter.

The uppercase Format Filter string ke huruf besar:

Contoh

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

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

</div>
Cobalah sendiri "

The lowercase Format Filter string menjadi huruf kecil:

Contoh

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

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

</div>
Cobalah sendiri "

Menambahkan Filter Directive

Filter ditambahkan ke arahan, seperti ng-repeat , dengan menggunakan karakter pipa | , diikuti oleh filter:

Contoh

The orderBy Filter macam array:

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

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

</div>
Cobalah sendiri "

Mata uang Filter

The currency Filter format sejumlah mata uang:

Contoh

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

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

</div>
Cobalah sendiri "

Baca lebih lanjut tentang filter mata uang dalam kami Filter Referensi mata uang AngularJS

Filter Filter

The filter Filter memilih subset dari sebuah array.

The filter Filter hanya dapat digunakan pada array, dan mengembalikan array yang berisi hanya item yang sesuai.

Contoh

Kembali nama-nama yang berisi huruf "i":

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

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

</div>
Cobalah sendiri "

Baca lebih lanjut tentang filter filter di kami Filter Referensi AngularJS penyaring

Filter Array Berdasarkan User Input

Dengan menetapkan ng-model direktif pada field input, kita dapat menggunakan nilai field input sebagai ungkapan dalam filter.

Ketik surat di bidang input, dan daftar akan menyusut / tumbuh tergantung pada pertandingan:

  • {{X}}

Contoh

<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>
Cobalah sendiri "

Menyortir Array Berdasarkan User Input

Klik header tabel untuk mengubah urutan ::

Nama Negara
{{X.name}} {{X.country}}

Dengan menambahkan ng-click direktif pada header tabel, kita dapat menjalankan fungsi yang mengubah urutan penyortiran dari array:

Contoh

<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>
Cobalah sendiri "

Filter kustom

Anda dapat membuat filter Anda sendiri dengan mendaftarkan fungsi pabrik filter baru dengan modul Anda:

Contoh

Membuat filter khusus yang disebut "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>
Cobalah sendiri "

The myFormat filter akan memformat setiap karakter lainnya ke huruf besar.


❮ Sebelumnya Berikutnya Bab ❯