Please help me to find my problem on my coding, I have done all the AngularJS code and html and php for the json encoding but I cannot fetch the data in my database... Here is my current code
Index.html
<body ng-app="myApp" ng-controller="KaryawanCtrl">
<form method="post">
<input type="text" ng-model="karyawan.nama">
<input type="text" ng-model="karyawan.alamat">
<input type="submit" ng-click="tambahData()" value="simpan">
</form>
<table ng-init="dapatkanData()">
<thead>
<th>nama</th>
<th>alamat</th>
</thead>
<tr ng-repeat="item in dataKaryawan">
<td>{{item.nama}}</td>
<td>{{item.alamat}}</td>
</tr>
</table>
Here is the angular code
js/app.js
var app= angular.module("myApp",[]);
app.controller("KaryawanCtrl",function($scope,$http){
//variabel awal
$scope.aksi="tambah";
$scope.karyawan={};
//angularjs untuk menyimpan data ke database
$scope.tambahData = function(){
$http.post(
'post.php',
{
data: $scope.karyawan
}
).success(function(data){
alert("data berhasil dimasukkan");
}).error(function(){
alert("Gagal menyimpan data");
});
//angularJS untuk menampilkan data ke tabel
$scope.dapatkanData = function(){
$http.get('karyawan.php').success(function(data){
$scope.dataKaryawan = data;
});
};
};
});
Here is the php
$koneksi = mysqli_connect("localhost","root","","belajar") or die("tidak bisa tersambung ke database");
$perintah_sql = "SELECT * FROM karyawan";
$data = [];
$result = mysqli_query($koneksi,$perintah_sql);
while($row= mysqli_fetch_array($result)){
$temp_data = [];
$temp_data['nama']= $row['nama'];
$temp_data['alamat']=$row['alamat'];
array_push($data,$temp_data);
}
echo json_encode($data);
The problem is that your dapatkanData function is defined inside of the tambahData function. Just move it to the outside like this and it should work:
var app= angular.module("myApp",[]);
app.controller("KaryawanCtrl",function($scope,$http){
//variabel awal
$scope.aksi="tambah";
$scope.karyawan={};
$scope.tambahData = function(){
$http.post('post.php',{ data: $scope.karyawan }).success(function(data){
alert("data berhasil dimasukkan");
}).error(function(){
alert("Gagal menyimpan data");
});
};
$scope.dapatkanData = function(){
$http.get('karyawan.php').success(function(data){
$scope.dataKaryawan = data;
});
};
$scope.dapatkanData(); // Use this instead of ng-init. Remove that from the html
});
Try to bind your data like
$scope.dataKaryawan = data.data;
Or try to make
$scope.$apply()
after retrive data