编辑记录需要页面刷新

所有工作正常，但是当我插入一条记录并尝试编辑相同的记录时，它将不会被编辑并编辑相同的记录，我必须刷新页面，同样的情况发生在更新中，一旦记录更新我必须刷新页面编辑相同的记录编辑记录需要页面刷新

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

来源

2016-08-12 Amit Jeswani

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

来源

2016-08-12 04:19:46

-2

<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()'/> 
    </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($index)"/></td> 
       <td><input type="button" value="Edit" ng-click="editInfo($index)"/></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 (index) { 
          $http.post('delete.php', {del_id: $scope.details[index].id 
          }).success(function (result) { 
           $scope.details.splice(index, 1); 
           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 (index) { 
          $scope.currentIndex = index; 
          $http.post('edit.php', {edit_id: $scope.details[index].id, 
          }).success(function (result) { 
           $scope.firstname = result[0]['firstname'], 
           $scope.lastname = result[0]['lastname'], 
           $("#Insert").hide(); 
           $("#Update").show(); 
          }); 
         } 

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

        }]); 

    </script> 

</body>

来源

2016-08-12 05:22:49

编辑记录需要页面刷新

回答

相关问题