Malam ini sempat terbesit di benak bagaimana yah membuat sebuah filter dengan angular? setelah saya ulik sambil mengisi waktu luang malam malam di kantor akhirnya dapat juga, kali ini kita akan membuat sebuah filter data menggunakan data yang ada pada tutorial Mengambil Data Dari Controller Dengan AngularJS, tetapi sedikit arrangement pada bagian controllernya. langsung saja dari pada penasaran.
Hal yang pertama seperti biasa kita buat tag HTML dulu seperti di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Latihan Controller</title>
<script type="text/javascript" src="angular.min.js"></script>
</head>
<body>
<div ng-app="bukuApp">
<div ng-controller="MyController">
Cari Buku :<input type="text" ng-model="hasil">
<div>
<ul ng-repeat="b in book | filter:hasil | orderBy:'id'">
<li>Kode : {{b.kode}}</li>
<li>Nama : {{b.judul}}</li>
<li>Harga : {{b.harga}}</li>
<li>Penulis : {{b.penulis}}</li>
</ul>
</div>
</div>
</div>
</body>
</html>
dari script di atas kita dapat lihat ada fungsi filter yang tentu saja berfungsi untuk memfilter data tersebut, selanjutnya kita akan ketikan code javascriptnya, masih di folder yang sama tapi di letakannya di bawah tag </html>
<script type="text/javascript">
var book = angular.module('bukuApp', []);
book.controller('MyController',function($scope){
$scope.book = [
{kode:'Java',judul:'Java EE Programming',harga:'Rp.80000',penulis:'Rahman dkk'},
{kode:'javascript',judul:'Javascript 2014',harga:'Rp.70000',penulis:'Rully'},
{kode:'net',judul:'Advanced .Net platform',harga:'Rp.65000',penulis:'Rloio'},
{kode:'php',judul:'Php legacy code',harga:'Rp.80000',penulis:'Ruzman'}
];
});
</script>
nah terlihatkan perbedaannya?? setelah di copy semua silahkan run lalu lihat hasilnya dengan mengetikan data sesuai yang ada, maka hasilnya :
0 comments:
Post a Comment