Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
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
...
