利用X编辑AngularJS更新数据库 [英] AngularJS update database using X-Editable
问题描述
所以，我使用 AngularJS 与 X-编辑使编辑我的数据更简单的方法。
我有一个客户端，如姓名，电话，地址等所有信息的表..我可以申请 X-编辑就好了，直到那一刻我需要真正保存编辑数据库。
此外，该页面只显示一个单一的客户端，是个体客户端页面，只有他的细节。
这是code我使用的是：
page.html即可的
＆LT;表固定头类=detcli_tableNG-的init =get_detcliente（）＆GT;
＆LT;＆THEAD GT;
＆所述; TR＆GT;
＆LT;第i坎普和LT; /第i
＆LT;第i个地区信息＆LT; /第i
＆LT; / TR＆GT;
＆LT; / THEAD＆GT;
＆LT;＆TBODY GT;
＆所述; TR＆GT;
＆LT; TD＆GT;Código＆LT; / TD＆GT;
＆所述; TD＆GT; {{cliente.id}}＆下; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;＆诺姆LT; / TD＆GT;
＆所述; TD＆GT;＆下;跨度可编辑文本=cliente.nm_clienteonaftersave =的updatePerson（cliente.nm_cliente）＆GT; {{cliente.nm_cliente || 空}}＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆所述; TR＆GT;
＆LT; TD＆GT;联系电话＆LT; / TD＆GT;
＆所述; TD＆GT;＆下;跨度可编辑文本=cliente.num_telonaftersave =的updatePerson（cliente.num_tel）＆GT; {{cliente.num_tel || 空}}＆LT; / SPAN＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
[更多... code ...]
＆LT; / TBODY＆GT;
＆LT; /表＆gt;
app.js 的
myApp.controller（'DetClientesCtrl'，['$范围，$ HTTP，$ routeParams'，函数（$范围，$ HTTP，$ routeParams）{ VAR clienteId = $ routeParams.id; $ scope.get_detcliente =功能（）{
VAR URL ='？脚本/ PHP / db.php中行动= get_cliente';
返回$ http.get（URL）.success（httpSuccess）.error（函数（）{
警报（哎呀，埃罗！）;
}）;
}
httpSuccess =功能（响应）{
$ scope.detRes =响应;
}
功能getById（ARR，ID）{
为（变量D = 0，LEN = arr.length d的下; len个; D + = 1）{
如果（ARR [D]。.ID === ID）{
返回ARR并[d];
}
}
}
$ scope.get_detcliente（）。然后（函数（）{
$ scope.cliente = getById（$ scope.detRes，$ routeParams.id）;
}）; //更新客户端
$ scope.updatePerson =功能（）{
$ http.post（'脚本/ PHP / db.php中？行动= upd_cliente'，
{
ID：$ routeParams.id，
nm_cliente'：$ scope.nm_cliente，
num_tel'：$ scope.num_tel
}
）.success（功能（数据，状态，头，配置）{
$ scope.get_detcliente（）;
的console.log（efeutouÒ后！）;
}）错误（功能（数据，状态，头，配置）{
的console.log（申算法中errado！）;
}）;
};
}]）;
control.php 的
<青霉>这是我使用来添加新的数据，删除和，在这种情况下，更新现有数据的方法的
函数upd_cliente（）{
$数据= json_de code（的file_get_contents（PHP：//输入））;
的$ id = $ DATA-和SEQ ID;
$ nm_cliente = $数据 - ＆GT; nm_cliente;
$ num_tel = $数据 - ＆GT; num_tel; $ QRY =更新cad_cliente设置nm_cliente ='$ nm_cliente'，num_tel ='$ num_tel'其中cd ='$ ID';}
当我运行code，我没有错误可言。在的console.log 我使用的是正确地显示在控制台中，编辑我做的，是工作在屏幕上很好，但是当我刷新页面，没有数据保存，就又回到了previous数据。
怎么可能是错的？
和也我不知道这是否是做到这一点的最好办法，因为我有一个约10至15行的信息表，所以如果我只是编辑1或5线，在code会必须为每个编辑我做运行。
有没有更好的方式来处理它？</ P>
好了，经过一番研究，多多尝试/失败我凸轮与解决方案。
在 page.html即可我需要删除删除里面的code页面中的（） ，所以这将是这样的：
page.html即可的
＆LT; TD＆GT;＆LT;跨度可编辑的文本=cliente.nm_clienteonaftersave =的updatePerson（）＆GT; {{cliente.nm_cliente || 空}}＆LT; / SPAN＆GT;＆LT; / TD＆GT;
和对 app.js 我需要使用 $ scope.cliente.nm_cliente 而不是 $ scope.nm_cliente 。因此，code将是这样的：
app.js 的
$ scope.updatePerson =功能（）{
$ http.post（'脚本/ PHP / db.php中？行动= upd_cliente'，
{
ID：$ routeParams.id，
nm_cliente'：$ scope.cliente.nm_cliente，
num_tel'：$ scope.cliente.num_tel
}
）.success（功能（数据，状态，头，配置）{
//成功code在这里
}）错误（功能（数据，状态，头，配置）{
//错误code在这里
}）;
};
然后，在php文件我只需要编写其他领域，我需要对数据库进行更新，于我而言，这将是超过15个字段可以进行更新。
注意：据我所知，这code仅与选择的作品 onaftersave =，因为如果我们使用选项 onbeforesave =，喜欢这个名字本身，数据也不会因为它的执行通过的之前的新数据传递到$范围。
我很抱歉，如果我的任何信息是错误的，我开始学习AngularJS现在。但是，这是为我工作。
另外，我不知道是否有更好的方式来实现这一结果，因此，如果有人知道，请与我们分享！
So, i'm using AngularJS with X-Editable to make an easier way to edit my data.
I have a table with all the information of a client such as name, phone, address, etc.. And I could apply X-Editablejust fine until the moment I need to actually save the edit on the database.
Also, this page just show one single client, is an individual client page, with only his details.
This is the code I'm using:
page.html
<table fixed-header class="detcli_table" ng-init="get_detcliente()">
<thead>
<tr>
<th>Campo</th>
<th>Informação</th>
</tr>
</thead>
<tbody>
<tr>
<td>Código</td>
<td>{{cliente.id}}</td>
</tr>
<tr>
<td>Nome</td>
<td><span editable-text="cliente.nm_cliente" onaftersave="updatePerson(cliente.nm_cliente)">{{cliente.nm_cliente || "Empty"}}</span></td>
</tr>
<tr>
<td>Tel.</td>
<td><span editable-text="cliente.num_tel" onaftersave="updatePerson(cliente.num_tel)">{{cliente.num_tel || "Empty"}}</span></td>
</tr>
[... more code ...]
</tbody>
</table>
app.js
myApp.controller('DetClientesCtrl', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
var clienteId = $routeParams.id;
$scope.get_detcliente = function() {
var url = 'scripts/php/db.php?action=get_cliente';
return $http.get(url).success(httpSuccess).error(function() {
alert("Oops, erro!");
});
}
httpSuccess = function(response) {
$scope.detRes = response;
}
function getById(arr, id) {
for (var d = 0, len = arr.length; d < len; d += 1) {
if (arr[d].id === id) {
return arr[d];
}
}
}
$scope.get_detcliente().then(function(){
$scope.cliente = getById($scope.detRes,$routeParams.id);
});
//Update Client
$scope.updatePerson = function() {
$http.post('scripts/php/db.php?action=upd_cliente',
{
'id': $routeParams.id,
'nm_cliente' : $scope.nm_cliente,
'num_tel' : $scope.num_tel
}
).success(function (data, status, headers, config) {
$scope.get_detcliente();
console.log("efeutou o post!");
}).error(function (data, status, headers, config) {
console.log("Algo deu errado!");
});
};
}]);
control.php
This is the method i'm using to add new data, delete and, in this case, to update an existing data
function upd_cliente() {
$data = json_decode(file_get_contents("php://input"));
$id = $data->id;
$nm_cliente = $data->nm_cliente;
$num_tel = $data->num_tel;
$qry = "update cad_cliente set nm_cliente = '$nm_cliente', num_tel = '$num_tel' where cd = '$id'";
}
When I run the code, I get no errors at all. The console.log I'm using is showing properly in the console, the editing I do, is working fine on the screen but when I refresh the page, there is no data saved, it goes back to the previous data.
What may be wrong?
And also I don't know if this is the best way to do it, since I have a table with about 10 to 15 lines of information, so if I edit just 1 or 5 lines, the code will have to run for each edit I make.
Is there a better way to process it?
Well, after some research and a lot of try/fail i cam up with the solution.
in the page page.html i needed to remove the remove the code inside the (), so it is going to be like this:
page.html
<td><span editable-text="cliente.nm_cliente" onaftersave="updatePerson()">{{cliente.nm_cliente || "Empty"}}</span></td>
And on the app.js i needed to use $scope.cliente.nm_cliente instead of $scope.nm_cliente. So the code will be like this:
app.js
$scope.updatePerson = function() {
$http.post('scripts/php/db.php?action=upd_cliente',
{
'id': $routeParams.id,
'nm_cliente' : $scope.cliente.nm_cliente,
'num_tel' : $scope.cliente.num_tel
}
).success(function (data, status, headers, config) {
//Success code here
}).error(function (data, status, headers, config) {
//Error code here
});
};
Then, on the php file i just need to write the other fields i need to update on the database, in my case, it will be more than 15 fields to be possible to update.
Note: As far as i know, this code only works with the option onaftersave="" because if we use the option onbeforesave="", like the name itself, the data will not be passed since it's being executed before the new data is passed to the $scope.
I'm sorry if any of my information is wrong, i'm starting learning AngularJS right now. But this is working for me.
Also, i don't know if there is a better way to achieve this result, so, if anyone knows, please share it with us!
这篇关于利用X编辑AngularJS更新数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
