AngularJS 使用 X-Editable 更新数据库

Question

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

我有一个table，其中包含客户的所有信息，例如姓名、phone、地址等。我可以申请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 在控制台中正确显示，我所做的编辑在屏幕上工作正常，但是当我刷新页面时，没有保存任何数据，它会返回到以前的数据。

可能有什么问题？

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

有没有更好的处理方式？

Answer 1

好吧，经过一些研究和大量 try/fail 我想出了解决方案。

在页面 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=""，如名称本身，数据不会被传递，因为它正在执行 before 新数据被传递到 $scope.

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

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

AngularJS 使用 X-Editable 更新数据库

AngularJS update database using X-Editable

html

javascript

angularjs

x-editable