AngularJS 使用 X-Editable 更新数据库

Question

所以，我使用 AngularJS 和 X-Editable 来更轻松地编辑我的数据。

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

另外，这个页面只显示一个客户，是一个单独的客户页面，只有他的详细信息。

这是我正在使用的代码：

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
这是我用来添加新数据、删除以及在这种情况下更新现有数据的方法数据

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'";

}

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

可能出了什么问题？

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

有没有更好的处理方法？

Answer 1

好吧，经过一些研究和大量尝试/失败后，我想出了解决方案。

在页面page.html我需要删除删除()里面的代码，所以它会是这样的：

page.html

<td><span editable-text="cliente.nm_cliente" onaftersave="updatePerson()">{{cliente.nm_cliente || "Empty"}}</span></td>

在app.js 上，我需要使用$scope.cliente.nm_cliente 而不是$scope.nm_cliente。所以代码会是这样的：

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
    });
};

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

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

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

另外，我不知道有没有更好的方法来达到这个效果，所以，如果有人知道，请与我们分享！