我不能应用从表格行中选择我的数据的修改

Question

当我尝试从表中修改一行时，我遇到了问题，我使用AngularJS作为客户端，ASP.Net作为其余的API，这是我的HTML代码：

<table ng-controller="etudmodifCtrl"> 
<thead> 
</thead> 
<tbody > 
<tr ng-repeat="store in currentPageStores> 
     <td align="center">{{store.LastName}}</td> 
     <td align="center">{{store.FirstName}}</td> 
     <td align="center">{{store.Email}}</td> 
     <td align="center" >{{store.Id}}</td> 
     <td align="center" ng-controller="etuddeleteCtrl"> 
      <div id="myModal" class="modal fade" role="dialog" > 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
       <div class="modal-header">....</div> 
       <div class="modal-body"> 
         <div class="form-group"> 
         <label>LastName</label> 
          <div class="col-sm-10"> 
       <input type="text" class="form-control" ng-model="nomet"> 
          </div> 
         </div> 
         <div class="form-group"> 
         <label>FirstName</label> 
          <div class="col-sm-10"> 
       <input type="text" class="form-control" ng-model="prenomet"> 
          </div> 
         </div> 
         <div class="form-group"> 
         <label>Email</label> 
          <div class="col-sm-10"> 
      <input type="text" class="form-control" ng-model="email"> 
          </div> 
         </div> 
       </div> 
       //click on this button will apply the modification 
       <div class="modal-footer"> 
        <button id="button" data-dismiss="modal">OK</button> 
       </div> 
      </div> 
     </div> 
    //this button opens the modal in which I will modify the data 
     <button ng-click="open(store.Id)" data-target="#myModal">Modify</button> 
     </td> 
    </tr></tbody></table> 

，这是控制器：

.controller("etudmodifCtrl", ["$scope", "$http", "logger","$route", function ($scope, $http, logger,$route) { 


          $scope.errors = []; 
          $scope.msgs = []; 

          $scope.open = function (Id) { 

           console.log("ID open---"); 
           console.log(Id); 
          $http({method: 'GET', url: 'http://localhost:50001/api/Students/'+Id}) 

            .success(function (data) { 
            $scope.errors.splice(0, $scope.errors.length); // remove all error messages 
            $scope.msgs.splice(0, $scope.msgs.length); 
            $scope.prenomet=data.FirstName; 
            $scope.nomet=data.LastName; 
            $scope.email=data.Email; 
             console.log("success display"); 

         document.getElementById('button').onclick = function() { 
          console.log("ID après modifetud---"); 
          console.log(Id); 
          $http({method: 'PUT', 
           url:'http://localhost:50001/api/Students/modifier/'+Id, 
           headers: {'Content-Type': 'application/json'}, 
           data:'{"FirstName":"'+$scope.prenomet+'","LastName":"'+$scope.nomet+'","Email":"'+$scope.email+'"}' 
          } 

            ) 

            .success(function() { 
             console.log("-----success-----"+Id); 
             console.log($scope.prenomet+" "+$scope.nomet+" "+$scope.email); 
             logger.logSuccess("etudiant a été modifié avec succès"); 

            }).error(function() { 

           logger.logError("echec de modification de l'étudiant"); 
           console.log("data error ..."); 
          }); 
           } 

            }).error(function (data, status, headers, config) { 
           console.log("data error ..."); 
          }); 

          }}]) 

每例如，如果我选择表的使用id = 6我得到正确的输入表单中的数据行，但当我尝试修改输入数据然后点击“OK”按钮时，我总是得到旧数据而不是修改后的数据

与 id = 6和$ scope.prenomet = Student6，$ scope.nomet = 6，$ scope.email = student6 @ yahoo.com（无修改），如果我将这些数据修改为scope.prenomet = student66，$ scope.nomet = 66，$ scope.email = student66 @ yahoo.com 我得到这个在控制台上：

ID open--- 
6 
success display 
ID après modifetud--- 
6 
-----success-----6 
Student6 6 student6@yahoo.com 
success 

你有什么想法，请有关问题，非常感谢帮助

Answer 1

我看到了一些应该更新的东西，以使其正常工作。

在HTML：

<div class="modal-content"> 
     <div class="modal-header">....</div> 
     <div class="modal-body"> 
       <div class="form-group"> 
       <label>LastName</label> 
        <div class="col-sm-10"> 
     <input type="text" class="form-control" ng-model="formData.nomet"> 
        </div> 
       </div> 
       <div class="form-group"> 
       <label>FirstName</label> 
        <div class="col-sm-10"> 
     <input type="text" class="form-control" ng-model="formData.prenomet"> 
        </div> 
       </div> 
       <div class="form-group"> 
       <label>Email</label> 
        <div class="col-sm-10"> 
    <input type="text" class="form-control" ng-model="formData.email"> 
        </div> 
       </div> 
     </div> 
     //click on this button will apply the modification 
     <div class="modal-footer"> 
      <!-- May need $parent.editRow() in ng-click if $scope is an issue --> 
      <button id="button" type="button" data-ng-click="editRow()" data-dismiss="modal">OK</button> 
     </div> 
    </div> 

在你的控制器：

从你的成功背景删除功能document.getElementById()，并把它的它的范围之内。您可以通过ng-click访问提交功能。另外，将其重写为$scope函数。将jQuery与Angular混合只会让你努力工作以获得你需要做的事情。另外，由于您使用的是模式，因此建议使用该模式。 $ scope对象中的符号。它更干净，并且不会因模态的子范围而陷入错误。

$scope.open = function (Id) {  
    console.log("ID open---"); 
    console.log(Id); 
    // This GET should be in an Angular service injected into your controller and called from here. 
    $http({method: 'GET', url: 'http://localhost:50001/api/Students/'+Id}) 
    .success(function (data) { 
     $scope.errors.splice(0, $scope.errors.length); // remove all error messages 
     $scope.msgs.splice(0, $scope.msgs.length); 
     $scope.formData = {}; // Base object for your form. 
     $scope.formData.prenomet = data.FirstName; 
     $scope.formData.nomet = data.LastName; 
     $scope.formData.email = data.Email; 
     console.log("success display"); 
    }) 
} 

$scope.editRow = function() { 
    console.log("ID après modifetud---"); 
    console.log(Id); 
    // This PUT should be in an Angular service injected into your controller and called from here. 
    $http({method: 'PUT', 
    url:'http://localhost:50001/api/Students/modifier/'+Id, 
    headers: {'Content-Type': 'application/json'}, 
    data:'{"FirstName": "'+$scope.formData.prenomet+'", "LastName":"'+$scope.formData.nomet+'", "Email":"'+$scope.formData.email+'"}' 
    }) 
    .success(function() { 
    console.log("-----success-----"+Id); 
    console.log($scope.formData.prenomet+" "+$scope.formData.nomet+" "+$scope.formData.email); 
    logger.logSuccess("etudiant a été modifié avec succès"); 

    }).error(function() { 
    logger.logError("echec de modification de l'étudiant"); 
    console.log("data error ..."); 
} 

我还没有测试过这个代码，但它应该非常接近你需要做的工作。