angularjs CDN
https://angularjs.org/ Version 1.8.2 https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js
CREATE TABLE `members` (
`id` int(11) NOT NULL,
`firstname` varchar(30) NOT NULL,
`lastname` varchar(30) NOT NULL,
`address` varchar(150) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `members` (`id`, `firstname`, `lastname`, `address`) VALUES
(1, 'Airi', 'Satou', 'Tokyo'),
(2, 'Angelica ', 'Ramos', 'London'),
(3, 'Ashton ', 'Cox', 'San Francisco'),
(4, 'Bradley ', 'Greer', 'London'),
(5, 'Brenden ', 'Wagner', 'San Francisco'),
(40, 'Brielle', 'Williamson', 'New York'),
(54, 'Bruno', 'Nash', 'London'),
(55, 'Caesar', 'Vance', 'New York'),
(56, 'Cara', 'Stevens', 'New York'),
(57, 'Cedric', 'Kelly', 'Edinburgh'),
(58, 'Zorita Serran', 'Satou', 'Tokyo'),
(59, 'Angelica ', 'Ramos', 'London'),
(60, 'Ashton ', 'Cox', 'San Francisco'),
(61, 'Bradley ', 'Greer', 'London'),
(62, 'Brenden ', 'Wagner', 'San Francisco'),
(63, 'Brielle', 'Williamson', 'New York'),
(64, 'Bruno', 'Nash', 'London'),
(65, 'Caesar', 'Vance', 'New York'),
(66, 'Cara', 'Stevens', 'New York'),
(67, 'Brenden ', 'Wagner', 'San Francisco'),
(68, 'Brielle', 'Williamson', 'New York'),
(69, 'Bruno', 'Nash', 'London'),
(70, 'Caesar', 'Vance', 'New York'),
(71, 'Cara', 'Stevens', 'New York'),
(72, 'Cedric', 'Kelly', 'Edinburgh'),
(74, 'test1', 'test1lastname', 'olongapo');
ALTER TABLE `members`
ADD PRIMARY KEY (`id`);
ALTER TABLE `members`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=75;
index.html
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="appinline">
<head>
<meta charset="utf-8">
<title>AngularJS Inline Edit with PHP MySQLi</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-controller="inlineCrt" ng-init="fetch()">
<div class="container">
<h1 class="page-header text-center">AngularJS Inline Edit with PHP MySQLi</h1>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="alert alert-success text-center" ng-show="success">
<button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
<i class="fa fa-check"></i> {{ message }}
</div>
<div class="alert alert-danger text-center" ng-show="error">
<button type="button" class="close" ng-click="clearMessage()"><span aria-hidden="true">×</span></button>
<i class="fa fa-warning"></i> {{ message }}
</div>
<table class="table table-bordered table-striped" style="margin-top:10px;">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in members" ng-include="getTemplate(data)">
</tr>
</tbody>
</table>
<script type="text/ng-template" id="normal">
<td>{{data.firstname}}</td>
<td>{{data.lastname}}</td>
<td>{{data.address}}</td>
<td><button type="button" ng-click="edit(data)" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Edit</button></td>
</script>
<script type="text/ng-template" id="edit">
<td><input type="text" class="form-control" ng-model="editmember.firstname"></td>
<td><input type="text" class="form-control" ng-model="editmember.lastname"></td>
<td><input type="text" class="form-control" ng-model="editmember.address"></td>
<td>
<button type="button" ng-click="save(editmember)" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Save</button>
<button type="button" ng-click="reset()" class="btn btn-default"><span class="glyphicon glyphicon-remove"></span> Cancel</button>
</td>
</script>
</div>
</div>
</div>
<script>
var app = angular.module('appinline', []);
app.controller('inlineCrt', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.editMode = false;
$scope.editmember = {};
$scope.getTemplate = function (data) {
if (data.id === $scope.editmember.id) return 'edit';
else return 'normal';
};
$scope.fetch = function(){
$http({
method: 'GET',
url: 'fetch.php',
}).then(function (data){
console.log(data)
$scope.members = data.data;
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.edit = function(data){
$scope.editmember = angular.copy(data);
}
$scope.save = function(editmember){
$http({
method: 'POST',
url: 'save.php',
data:$scope.editmember,
}).then(function (data){
console.log(data);
if(data.data.error){
$scope.error = true;
$scope.success = false;
$scope.message = data.data.message;
}
else{
$scope.fetch();
$scope.reset();
$scope.success = true;
$scope.error = false;
$scope.message = data.data.message;
}
},function (error){
console.log(error, 'can not get data.');
});
}
$scope.reset = function () {
$scope.editmember = {};
};
$scope.clearMessage = function(){
$scope.success = false;
$scope.error = false;
}
});
</script>
</body>
</html>
fetch.php
//fetch.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$output = array();
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
echo json_encode($output);
?>
save.php
//save.php
<?php
$conn = new mysqli('localhost', 'root', '', 'testingdb');
$data = json_decode(file_get_contents("php://input"));
$out = array('error' => false);
$id = $data->id;
$firstname = $data->firstname;
$lastname = $data->lastname;
$address = $data->address;
$sql = "UPDATE members SET firstname = '$firstname', lastname = '$lastname', address = '$address' WHERE id = '$id'";
$query = $conn->query($sql);
if($query){
$out['message'] = "Member updated Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Cannot update Member";
}
echo json_encode($out);
?>
