Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
ng-repeat tidak menampilkan data
permisi mohon bantuan nya nih , saya terbilang baru dalam AngularJS nah saya sedang belajar untuk menggunakan $http untuk operasi CRUD dengan PHP dan MySQL . saya mendapatkan problem ketika ingin menampilkan data nya padahal koneksi ke database tidak ada masalah. bahkan saya console log repson dari $http.get pun berhasil mengambil data nya . tetapi tetap tidak tampil di dalam table menggunakan ng-repeat.
Berikut kode untuk index.html nya :
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Sistem Karyawan</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body ng-controller="controllerKaryawan" ng-init="displayData()">
<div class="container">
<h2 class="page-header text-center">Daftar Karyawan</h2>
<!-- Kolom tambah data dan pencarian karyawan -->
<div class="row">
<div class="col-sm-4">
<button class="btn btn-primary btn-block" data-toggle="modal" data-target="#myModal">Tambah Karyawan</button>
</div>
<div class="col-sm-8">
<input type="text" ng-model="cari" placeholder="Cari karyawan..." class="form-control">
</div>
</div>
<!-- End -->
<!-- Table data karyawan -->
<table class="table table-responsive">
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Alamat</th>
<th>Jabatan</th>
<th>Gaji</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in karyawan">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
<td>{{data.address}}</td>
<td>{{data.position}}</td>
<td>{{data.salary | currency}}</td>
<td><button class="btn btn-success btn-sm" ng-click="updateData(data.id)"><i class="glyphicon glyphicon-pencil"></i></button> | <button class="btn btn-danger btn-sm" ng-click="deleteData(data.id)"><i class="glyphicon glyphicon-remove"></i></button></td>
</tr>
</tbody>
</table>
<!-- end table -->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Tambah Data Karyawan</h4>
</div>
<div class="modal-body">
<form ng-submit="tambahData()" name="myForm" novalidate>
<div class="form-group">
<label for="name">Nama</label>
<input type="text" name="name" ng-model="name" class="form-control">
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea name="alamat" ng-model="address" cols="30" class="form-control"></textarea>
</div>
<div class="form-group">
<label for="position">Jabatan</label>
<input type="text" name="position" ng-model="position" class="form-control">
</div>
<div class="form-group">
<label for="salary">Gaji</label>
<input type="text" name="salary" ng-model="salary" class="form-control">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" ng-click="tambahData()" data-dismiss="modal">Save Data</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<script src="js/angular.min.js"></script>
<script src="app.js"></script>
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
dan ini query untuk retrieve data (data.php) :
<?php
include('koneksi.php');
$query = "SELECT id, name, address, position, salary FROM karyawan";
$data = mysqli_query($conn, $query);
while($row = mysqli_fetch_assoc($data)){
$output[] = $row;
}
echo json_encode($output);
?>
dan berikut adalah kode untuk app.js :
var myApp = angular.module('myApp', []);
myApp.controller('controllerKaryawan', function($scope, $http){
$scope.displayData = function(){
$http.get("db/data.php").then(function(response){
$scope.karyawan = response;
console.log(response);
})
}
})
mohon bantuan nya untuk dikoreksi apa yang salah :)
7 Jawaban:
coba didebug pas get data dari dbnya mas, datanya dapet apa engga .. sebelum echo json_encode :
print_r($output);
die();
data nya berhasil dapet kok bro angular nya pun juga udh berhasi get data dri server pas saya console log . cuman data tsb gak tampil di table nya .
Kalo di console log $scope.karyawan outputnya gimana gan? jangan console log ajax response nya. Kalo liat htmlnya sih mestinya udah bener.
Jawaban Terpilih
coba $scope.displayData nya jangan ditaro di init.. di jalanin di jsnya aja.. trus, $scope.karyawan di init dulu variablenya sebagai array.
var myApp = angular.module('myApp', []);
myApp.controller('controllerKaryawan', function($scope, $http){
$scope.karyawan = [];
$scope.displayData = function(){
$http.get("db/data.php").then(function(response){
$scope.karyawan = response;
console.log($scope.karyawan);
})
}
$scope.displayData();
})
SS Hasilnya Kesini
Okeh mas @CodenameJR udh solve trnyata benar harus di initalize dlu $scope.karyawan sebagai array .
kalo nampilih 1 data gimana kang? mau saya taro di
...
