Question

一切运行良好但是当我插入一条记录并尝试编辑相同的记录时，它将不会被编辑并编辑相同的记录我必须刷新页面，同样的情况发生在更新中，一旦记录更新，我必须刷新编辑同一记录的页面

<html ng-app="crudApp">
    <head>
        <meta charset="UTF-8">
        <title>Angular js</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

    <body ng-controller="DbController">
        <form   id="form" name="employee">
            First Name: <input type="text" ng-model="firstname"><br/><br/>
            Last Name: <input type="text" ng-model="lastname"><br/><br/>
            <input type="submit" name="btnInsert" id="Insert" value="Insert" ng-click='insertData()'/>
            <input type="submit" name="btnUpdate" id="Update"value="Update" ng-click='UpdateData(currentUser)'/>
        </form>

        <div>
            <table border="1">
                <tr>
                    <th>Firstname</th>
                    <th>Lastname</th>
                    <th>Delete</th>
                    <th>Edit</th>
                </tr> 
                <tr ng-repeat="detail in details">
                    <td>{{detail.firstname}}</td>
                    <td>{{detail.lastname}}</td>
                    <td><input type="button" value="Delete"  ng-click="deleteInfo(detail.id)"/></td>
                    <td><input type="button" value="Edit"  ng-click="editInfo(detail.id)"/></td>
                </tr>
            </table>
        </div>
        <script>
                    var crudApp = angular.module('crudApp', []);
                    crudApp.controller("DbController", ['$scope', '$http', function ($scope, $http) {

                            getInfo();
                            function getInfo() {
                                $http.post('select.php').success(function (data) {
                                    // Stored the returned data into scope
                                    $scope.details = data;
                                });
                            }

                            $scope.deleteInfo = function (info) {
                                $http.post('delete.php', {del_id: info
                                }).success(function (result) {
                                    getInfo()
                                    console.log(result);
                                });
                            }

                            $scope.insertData = function () {
                                $http.post("insert.php", {
                                    'firstname': $scope.firstname,
                                    'lastname': $scope.lastname,
                                }).success(function () {
                                    getInfo();
                                    document.getElementById("form").reset();
                                });
                            }


                            $scope.editInfo = function (info) {
                                $scope.currentUser = info;
                                $http.post('edit.php', {edit_id: $scope.currentUser,
                                }).success(function (result) {
                                    $scope.firstname = result[0]['firstname'],
                                            $scope.lastname = result[0]['lastname'],
                                            $("#Insert").hide();
                                    $("#Update").show();
                                });
                            }

                            $scope.UpdateData = function (currentUser) {
                                $http.post("update.php", {
                                    'firstname': $scope.firstname,
                                    'lastname': $scope.lastname,
                                    'update_id': currentUser,
                                }).success(function (result) {
                                    getInfo();
                                    $("#Insert").show();
                                    $("#Update").hide();
                                    document.getElementById("form").reset();
                                });
                            }

                        }]);

        </script>

    </body>

</html>

Answer 1

编辑完成后，您将响应数据插入新变量中。这不应该发生。您应该仅更新旧数据（即$scope.detail）。

以下是：

首先，在您的<table>代码中，您必须再传递1个参数，即$index。这个$index是我们必须更新的记录的关键。我们需要它来更新$scope.detail的记录。

<table border="1">
    <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Delete</th>
        <th>Edit</th>
    </tr> 
    <tr ng-repeat="detail in details">
        <td>{{detail.firstname}}</td>
        <td>{{detail.lastname}}</td>
        <td><input type="button" value="Delete"  ng-click="deleteInfo(detail.id)"/></td>
        <td><input type="button" value="Edit"  ng-click="editInfo(detail.id, $index)"/></td>
    </tr>
</table>

其次，请参阅editInfo()的此代码。而不是将响应数据分配给新变量。我们仅从$scope.detail更新旧数据。了解我们如何使用我们从上一步获得的index变量找到我们的数据。

//info: this info is the detail.id that you've passed from the table
//index: this is the index of the record from $scope.detail that we want want to edit.
$scope.editInfo = function (info, index) {
    $scope.currentUser = info;
    $http.post('edit.php', {edit_id: $scope.currentUser,
    }).success(function (result) {

        $scope.detail[index] = result[0]['firstname'];
        $scope.detail[index] = result[0]['lastname'];

        $("#Insert").hide();
        $("#Update").show();
    });
}

编辑记录需要页面刷新

1 个答案: