Membuat Validasi Filter Data Dengan Angularjs Dan Codeigniter-3
Membuat validasi filter data di angularJS - Hello, kali ini aku akan sedikit memperbaharui tutorial aku sebelumnya yang membahas wacana "Bagaimana cara menciptakan filter data dengan angularJS" . Saya akan sedikit menambahkan sedikit validasi "data tidak ditemukan" pada bab filter data. Untuk sanggup mempraktikan tutorial ini, anda di haruskan terlebih dahulu mempraktikan tutorial aku 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 isyarat 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 isyarat di atas, aku 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. sesudah itu variabel result tadi akan di olah oleh directive ng-if.
DEMO
Mungkin cukup sekian dulu untuk artikel angularJS kali ini. Mohon maaf bila ada aneka macam kekurangan pada ketika menjelaskan materi. Harap di ma'lum, aku juga masih berguru sama ibarat anda hihihi :) . Jangan sungkan untuk mengirim komentar bila ada yang tidak paham atau pun ada yang perlu di perbaiki dari isyarat yang aku buat. :)
Artikel ini masih bersambung, tunggu artikel selanjutnya ya :). Jangan lupa di bookmak alamatnya. tekan CTRL+D :)
0 Response to "Membuat Validasi Filter Data Dengan Angularjs Dan Codeigniter-3"
Posting Komentar