AngularJS Tutorial : Menggunakan Fungsi Filter di AngularJS

angularjs

Kemarin saya menemui kasus, bagaimana sih melakukan filter pada sebuah list data angularJS? Kebetulan rekan saya di kantor  juga mengalami. Data berupa array, ditampilkan dengan ng-repeat untuk melakukan looping/perulangan. Filternya bisa berasal dari inputan form yang berupan textfield atau combo-box. Filtering data pada angularJS bisa disisipkan saat melakukan perulangan data. Di tulisan kali ini, saya akan menjelaskan sedikit cara menggunakan filter data pada angularJS.

Kita buat sebuah controller baru, yang berisikan array data. Kebetulan malam ini saya kepikiran dengan mantan (hahaha), yang udah datanya saya isikan dengan nama-nama mantan :))

var app = angular.module("App", []);
app.controller("MantanCtrl", ['$scope', function($scope) {
  $scope.kategori = [
    {status : 0, title : "Mantan"},
    {status : 1, title : "Gebetan"}
  ];

  $scope.mantan = [
    {id: 1, name:'Ayuk', status:1},
    {id: 2, name:'Dewik', status:0},
    {id: 3, name:'Siska', status:0},
    {id: 4, name:'Sinta', status:0},
    {id: 5, name:'Uni', status:1},
    {id: 6, name:'Sefty', status:0},
    {id: 7, name:'Wiwin', status:1},
    {id: 8, name:'Riska', status:1},
    {id: 9, name:'Rika', status:0},
    {id: 10, name:'Yunita', status:1},
    {id: 11, name:'Linda', status:1},
    {id: 12, name:'Ria', status:1},
  ];
}]);

Sekarang kita buat view berupa file html, yang akan melakukan perulangan data dan filter data dari sebuah combo-box.

<html ng-app="App">
<head>
<title>Ng-Repeat with Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</head>
<body>
  <div ng-controller="MantanCtrl">
  <select ng-model="kat.status">
    <option value="{{ opsi.status }}" ng-repeat="opsi in kategori">{{ opsi.title }}</option>
  </select>
      <ul>
        <li ng-repeat="people in mantan | filter:kat">
          {{ people.name }}
        </li>
      </ul>

  {{ kat }}
  </div>
</body>
</html>

Pada kode view di atas saya menambahkan fungsi filter saat perulangan data. Pada combo-box, saya akan mem-filter status dari data yang ditampilkan. Hasilnya bisa dilihat pada link berikut. Cukup mudah kan? Semoga sedikit code snippet ini bisa bermanfaat untuk rekan-rekan.

“Stay Foolish, Stay Hungry”

Happy Blogging and Keep Coding

Cheerrrss….!!!!

3 comments

  1. ikhsan Reply

    gan ane mau tnya kalau kasus nya search nya itu pakai form inputan lalu di click button search nya gimana yah di controller nya??

  2. DEdi Reply

    butuh programer web yang ngerti angularjS dan json, buat bulan ini. hubunggi saya HP.081314896820 Dedi

Leave a Reply

Your email address will not be published. Required fields are marked *