AngularJS使用X-Editable更新数据库

So, i'm using AngularJS with X-Editable to make an easier way to edit my data.

所以，我正在使用带有X-Editable的AngularJS来更简单地编辑我的数据。

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.

我有一个表格，其中包含客户的所有信息，如姓名，电话，地址等。我可以应用X-Editable一直很好，直到我需要实际保存数据库上的编辑。

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

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

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

control.php这是我用来添加新数据，删除以及在这种情况下更新现有数据的方法

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.

当我运行代码时，我根本没有错误。我正在使用的console.log在控制台中正常显示，我所做的编辑在屏幕上工作正常，但是当我刷新页面时，没有保存数据，它会返回到之前的数据。

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.

而且我不知道这是否是最好的方法，因为我有一个大约10到15行信息的表，所以如果我只编辑1或5行，代码将必须为每个编辑运行我做。

Is there a better way to process it?

有没有更好的方法来处理它？

1 个解决方案

#1

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我需要删除删除（）内的代码，所以它将是这样的：

page.html

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.cliente.nm_cliente而不是$ scope.nm_cliente。所以代码将是这样的：

app.js

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.

然后，在php文件上我只需要编写我需要在数据库上更新的其他字段，在我的情况下，将有超过15个字段可以更新。

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.

注意：据我所知，此代码仅适用于onaftersave =“”选项，因为如果我们使用选项onbeforesave =“”，就像名称本身一样，数据将不会被传递，因为它在新数据之前被执行传递到$ scope。

I'm sorry if any of my information is wrong, i'm starting learning AngularJS right now. But this is working for me.

如果我的任何信息有误，我很抱歉，我现在正在开始学习AngularJS。但这对我有用。

Also, i don't know if there is a better way to achieve this result, so, if anyone knows, please share it with us!

此外，我不知道是否有更好的方法来实现这一结果，所以，如果有人知道，请与我们分享！