Membuat validasi filter data di angularJS - Hello, kali ini saya akan sedikit memperbaharui tutorial saya sebelumnya yang membahas tentang "Bagaimana cara membuat filter data dengan angularJS" . Saya akan sedikit menambahkan sedikit validasi "data tidak ditemukan" pada bagian filter data. Untuk dapat mempraktikan tutorial ini, anda di haruskan terlebih dahulu mempraktikan tutorial saya sebelumnya (kalau memang anda belum pernah mempraktikannya) .
Setelah anda mempraktikan tutorial sebelumnya. coba anda buka kembali file view dengan nama angular-filter-data.php . Lalu salin semua kode di bawah ini ke file view angular-filter-data.php
<html ng-app="app_filter">
<meta charset="utf-8">
<head>
<title>Angular Filter Data</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<div class="container" ng-controller="ini_controller">
<h1>ANGULAR.JS : Filter data</h1>
<input type="text" class="form-control" placeholder="Filter..." ng-model="filter_data">
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>NIM</th>
<th>NAMA</th>
<th>JENIS KELAMIN</th>
<th>ALAMAT</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="val in (result = (ini_datanya | filter:filter_data))">
<td>{{val.id}}</td>
<td>{{val.nim}}</td>
<td>{{val.nama}}</td>
<td>
<b><span class="text-success" ng-show="val.jk=='L'">Laki-Laki</span>
<span class="text-danger" ng-show="val.jk=='P'">Perempuan</span></b>
</td>
<td>{{val.alamat}}</td>
</tr>
<tr ng-if="result.length == 0">
<td colspan="5" align="center">Data tidak ditemukan</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var app=angular.module('app_filter',[]);
app.controller('ini_controller',function($scope,$http){
$scope.ini_datanya=[];
$http.get("<?php echo site_url('angular/data_angularnya');?>").success(function(result){
$scope.ini_datanya=result;
});
});
</script>
</body>
</html>
Keterangan :
Pada kode di atas, saya telah tambahkan sebuah validasi sederhana untuk filter data.
<tbody>
<tr ng-repeat="val in (result = (ini_datanya | filter:filter_data))">
<td>{{val.id}}</td>
<td>{{val.nim}}</td>
<td>{{val.nama}}</td>
<td>
<b><span class="text-success" ng-show="val.jk=='L'">Laki-Laki</span>
<span class="text-danger" ng-show="val.jk=='P'">Perempuan</span></b>
</td>
<td>{{val.alamat}}</td>
</tr>
<tr ng-if="result.length == 0">
<td colspan="5" align="center">Data tidak ditemukan</td>
</tr>
</tbody>
Saya menambahkan variabel result yang berfungsi sebagai indikator, apakah data yang di cari ada atau tidak ada. setelah itu variabel result tadi akan di olah oleh directive ng-if.
DEMO
Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf jika ada banyak sekali kekurangan pada saat menjelaskan materi. Harap di ma'lum, saya juga masih belajar sama seperti anda hihihi :) . Jangan sungkan untuk mengirim komentar jika ada yang tidak paham atau pun ada yang perlu di perbaiki dari kode yang saya buat. :)
Artikel ini masih bersambung, tunggu artikel selanjutnya ya :). Jangan lupa di bookmak alamatnya. tekan CTRL+D :)
Posting Komentar