我正在尝试在angularJS中执行内联编辑,然后更新在Mysql表中输入的数据,但我是角度新手并且不知道如何处理输入的数据并使用AJAX发送它,所以在下面的代码中:变量编辑后tid, tname, tphone
仍为空。如何在内联编辑后将新ID(或名称或电话)存储到数据库中?
HTML:
<table class="table">
<thead>
<tr>
<th class="id">User Id
</th>
<th class="name">Name
</th>
<th class="phone">Phone
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in ItemsByPage[currentPage]">
<td ><div contentEditable="true" data-ng-model="tid">{{item.id}}
</div><button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
<td><div contentEditable="true" ng-model="tname">{{item.name}}</div>
<button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
<td><div contentEditable="true" ng-model="tphone">{{item.phone}}</div>
<button ng-click="inlineupdate()" type="button" class="btn btn-primary">Save</button></td>
</tr>
</tbody>
</table>
JS:
var myApp = angular.module('myApp', []);
var TableCtrl = myApp.controller('TableCtrl', function ($scope, ListService,$http) {
$scope.inlineupdate = function () {
var data = {
tid : $scope.tid,
tname : $scope.tname,
tphone : $scope.tphone
};
$.ajax({
data: data,
type: "post",
url: "inlineupdate.php",
success: function(data){
alert("Data Updated");
},
error:function (XMLHttpRequest, textStatus, errorThrown) {
if (textStatus == 'Unauthorized') {
alert('custom message. Error: ' + errorThrown);
} else {
alert('custom message. Error: ' + errorThrown);
}
}
});
};
});
myApp.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// view -> model
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// model -> view
ctrl.render = function(value) {
elm.html(value);
};
// load init value from DOM
ctrl.$setViewValue(elm.html());
elm.bind('keydown', function(event) {
console.log("keydown " + event.which);
var esc = event.which == 27,
el = event.target;
if (esc) {
console.log("esc");
ctrl.$setViewValue(elm.html());
el.blur();
event.preventDefault();
}
});
}
};
});
和inlineupdate.php
<?php
header('Content-Type: application/json');
include 'connect.php';
$db = new database();
$db->setDb_name('training');
$db->connect();
if(isset($_POST)){
$id = $_POST['tid'];
$name = $_POST['tname'];
$phone = $_POST['tphone'];
if(isset($_POST['tid'])){
$data = $db->inlineupdate('user',array('id'=>$id),array('name'=>$name));
echo json_encode($data);
}
if(isset($_POST['tname'])){
$data = $db->inlineupdate('user',array('name'=>$name),array('id'=>$id));
echo json_encode($data);
}
if(isset($_POST['tphone'])){
$data = $db->inlineupdate('user',array('phone'=>$phone),array('id'=>$id));
echo json_encode($data);
}
}
mysql_close();
?>
我没有写完整个代码..因为它太大了......