个人中心
gpt4 book ai didi

javascript - 编辑记录需要刷新页面

转载 作者：行者123 更新时间：2023-12-02 14:17:28 25 4
gpt4 key购买 nike

一切正常，但是当我插入一条记录并尝试编辑同一条记录时，它不会被编辑，并且要编辑同一条记录，我必须刷新页面，更新中也会发生同样的情况，一旦更新记录，我必须刷新编辑同一条记录的页面

<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>

最佳答案

编辑后，您将把响应数据插入到新变量中。这不应该发生。您应该仅更新旧数据(即 $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();
    });
}

关于javascript - 编辑记录需要刷新页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38909802/

25 4 0
文章推荐： javascript - 迭代某个时间的行值并添加
文章推荐： json - 如何仅将类的某些属性作为JSON发送
文章推荐： amazon-web-services - 将 AMI 从一个区域复制到另一个区域，然后无法 ssh 到新实例
文章推荐： ajax 响应中的 javascript 重定向
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com