AngularJS Filter

I.Latar Belakang.
pengenalan angular, dan penerapan angular.

II.Alat dan Bahan.
  Laptop / PC
  W3SCHOOLS
  Sublime Text

III.Tujuan.
Agar kita tau apa itu angular, cara cara penerapan nya.

IV.Penjelasan.

AngularJS Filter
Filter dapat ditambahkan di AngularJS ke format data.

AngularJS Filter
AngularJS menyediakan 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 Membatasi array / string, dalam jumlah tertentu elemen / karakter.
    lowercase Format string untuk menurunkan kasus.
    number Format nomor untuk string.
    orderBy Memerintahkan sebuah array dengan ekspresi.
    uppercase Format string ke huruf besar.

Menambahkan Filter untuk Expressions

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

uppercaseFormat Filter string ke huruf besar:
Contoh

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

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

</div>

lowercaseFormat Filter string menjadi huruf kecil:
Contoh

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

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

</div>

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

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

Mata uang Filter
currencyFilter format nomor sebagai mata uang:
Contoh

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

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

</div>

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

Filter Filter
filterFilter memilih subset dari sebuah array.

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

Menyortir Array Berdasarkan User Input

Dengan menambahkan ng-clickdirektif 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>

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

Membuat penyaring kustom 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>

myFormatfilter akan memformat setiap karakter lainnya ke huruf besar.

Contoh :

 Maka outputnya :

V.Kesimpulan.AngularJS adalah sebuah framework Javascript yang di kembangkan atau di bangun oleh tim Google. angularjs menggunakan metode MVC yang membuat source code aplikasi kita menjadi bersih dan mudah di kembangkan.

VI.Refrensi.
  https://www.w3schools.com/angular/angular_expressions.asp