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在控制台中正常显示，我所做的编辑在屏幕上正常工作，但是当我刷新页面时，没有保存数据，它会返回到之前的数据。 / p>

可能有什么问题？

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

有没有更好的方法来处理它？</ p>

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。但这对我有用。

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

AngularJS使用X-Editable

1 个答案: