Refresh table after $http post using angularjs, php and mysql - php

Question

I need to refresh the table to show newly added row after sending the data from $http method. Below is my working code for adding the form values to mysql table. Appreciate if anyone can help me out with the angular way to achieve this.
JS Code:
var myApp = angular.module('myApp', ['ngRoute']);
myApp.controller('bookmarkCtrl', function($scope, $http) {
$scope.addThis = function() {
$http({
url: "addbookmark.php",
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $.param({
bookmarktitle: $scope.bookmarktitle,
bookmarkurl: $scope.bookmarkurl
})
}).success(function(data, status, headers, config) {
//refresh the table after success
}).error(function(data, status, headers, config) {
});
}
});
HTML
<div class="panel-body" ng-app="myApp" ng-controller="bookmarkCtrl">
<input ng-model="bookmarktitle" type="text" class="form-control" required>
<input ng-model="bookmarkurl" type="text" class="form-control">
<button type="button" class="btn btn-default" ng-click="addThis();">Submit</button>
<table class="table table-responsive">
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<!-- repeat row -->
<tr>
<td>
<?php echo $row['bookmark_title'] ?>
</td>
</tr>
<!-- repeat row -->
</tbody>
</table>
</div>

Answer 1

#ismailvtl, angular is a client-side library, so typically the data would be populated through an ajax call from the client. In order to dynamically add a row, the data has to be accessible to the controller.
$scope.bookmarks = [];
$scope.getBookmarks = function() {
$http.get('/bookmarks').then(function(response) {
// should do validation here
$scope.bookmarks = response.data
}
}
$scope.getBookmarks();
Then, in your html, it should look like
...
<tr ng-repeat="bookmark in bookmarks">
<td>{{bookmark.bookmarktitle}}</td>
<tr>
...
Then, lastly, in your addThis() function:
$scope.addThis = function() {
$http({
url: "addbookmark.php",
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: $.param({
bookmarktitle: $scope.bookmarktitle,
bookmarkurl: $scope.bookmarkurl
})
}).success(function(data, status, headers, config) {
var bookmark = {
bookmarktitle: data.bookmarktitle,
bookmarkurl: data.bookmarkurl
}
$timeout(function() {
$scope.bookmarks.push(bookmark)
}
}).error(function(data, status, headers, config) {
// handle error here
});
}
Alternatively, you can assign the bookmarks array directly in the view from the php using ng-init (something like ng-init="bookmarks=[{bookmarktitle: 'titlea',bookmarkurl: 'urla'},...]" with the values being supplied by php.