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….!!!!
mantannya banyak beud gan 😀
thx for share
gan ane mau tnya kalau kasus nya search nya itu pakai form inputan lalu di click button search nya gimana yah di controller nya??
butuh programer web yang ngerti angularjS dan json, buat bulan ini. hubunggi saya HP.081314896820 Dedi