Getting Started
I've used CDN for Bootstrap and Angular JS so you need internet connection for them to work.
Creating our Database
First, we are going to create our database and insert sample data.
1. Open phpMyAdmin.
2. Click databases, create a database and name it as
angular.
3. After creating a database, click the SQL and paste the below codes. See image below for detailed instruction.
(1, 'Neovic', 'Devierte', 'Silay'),
(2, 'Julyn', 'Divinagracia', 'E.B.'),
(3, 'Gemalyn', 'Cepe', 'Bohol'),
(4, 'Matet', 'Devierte', 'Silay City'),
(5, 'Tintin', 'Devierte', 'Silay City'),
(6, 'Bien', 'Devierte', 'Cebu City'),
(9, 'Janna ', 'Atienza', 'Talisay City'),
(10, 'Desire', 'Osorio', 'Bacolod City');

index.html
This is our index which contains our table.
<!DOCTYPE html>
<html lang="en" ng-app="app"> <title>AngularJS Inline Edit using PHP/MySQLi
</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> <body ng-controller="memberdata" ng-init="fetch()"> <h1 class="page-header text-center">AngularJS Inline Edit using PHP/MySQLi
</h1> <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 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 }}
<table class="table table-bordered table-striped" style="margin-top:10px;"> <tr ng-repeat="member in members" ng-include="getTemplate(member)"> <script type="text/ng-template" id="normal"> <td>{{member.firstname}}
</td> <td>{{member.lastname}}
</td> <td>{{member.address}}
</td> <td><button type="button" ng-click="edit(member)" class="btn btn-success"><span class="glyphicon glyphicon-pencil"></span> Edit
</button></td> <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> <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>
angular.js
This contains our angular js script.
var app = angular.module('app', []);
app.controller('memberdata', function($scope, $http){
$scope.success = false;
$scope.error = false;
$scope.editMode = false;
$scope.editmember = {};
$scope.getTemplate = function (member) {
if (member.memid === $scope.editmember.memid) return 'edit';
else return 'normal';
};
$scope.fetch = function(){
$http.get('fetch.php').success(function(data){
$scope.members = data;
});
}
$scope.edit = function(member){
$scope.editmember = angular.copy(member);
}
$scope.save = function(editmember){
$http.post('save.php', editmember)
.success(function(data){
console.log(data);
if(data.error){
$scope.error = true;
$scope.success = false;
$scope.message = data.message;
}
else{
$scope.fetch();
$scope.reset();
$scope.success = true;
$scope.error = false;
$scope.message = data.message;
}
});
}
$scope.reset = function () {
$scope.editmember = {};
};
$scope.clearMessage = function(){
$scope.success = false;
$scope.error = false;
}
});
fetch.php
This is our PHP api that fetches data from our MySQL Database.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$sql = "SELECT * FROM members";
$query=$conn->query($sql);
while($row=$query->fetch_array()){
$output[] = $row;
}
?>
save.php
Lastly, this is our PHP code/api in saving the changes we made to our table.
<?php
$conn = new mysqli('localhost', 'root', '', 'angular');
$out = array('error' => false);
$memid = $data->memid;
$firstname = $data->firstname;
$lastname = $data->lastname;
$address = $data->address;
$sql = "UPDATE members SET firstname = '$firstname', lastname = '$lastname', address = '$address' WHERE memid = '$memid'";
$query = $conn->query($sql);
if($query){
$out['message'] = "Member updated Successfully";
}
else{
$out['error'] = true;
$out['message'] = "Cannot update Member";
}
?>
That ends this tutorial. Happy Coding :)