編輯記錄需要頁面刷新

所有工作正常，但是當我插入一條記錄並嘗試編輯相同的記錄時，它將不會被編輯並編輯相同的記錄，我必須刷新頁面，同樣的情況發生在更新中，一旦記錄更新我必須刷新頁面編輯相同的記錄編輯記錄需要頁面刷新

<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

編輯記錄需要頁面刷新

回答

相關問題