Редактировать запись требует обновления страницы

Question

Редактировать запись требует обновления страницы

0

Все работает хорошо, но когда я вставляю запись и пытаюсь отредактировать одну и ту же запись, она не будет отредактирована и отредактирована одна и та же запись. Мне нужно обновить страницу, и это произойдет в обновлении, после обновления записи мне нужно обновить страницу до редактировать одну и ту же запись

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

Amit Jeswani 12 авг. 2016, в 06:41

Источник

Теги:

javascript

angularjs

1 ответ

Ещё вопросы

Raman Sahasi · Answer 1 · 2016-08-12T01-52-00.000Z

После редактирования вы вставляете данные ответа в новые переменные. Этого не должно быть. Вы должны обновить только свои старые данные (т. $scope.detail).

Вот как:

Во-первых, в вашем коде <table> вам нужно передать еще один аргумент, т.е. $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();
    });
}