当我尝试从表中修改行时，我的代码出现问题，我使用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的表格行，我会正确输入表格中的数据，但是当我尝试修改输入数据时，然后在＆＃34; OK＆＃34;按钮我总是得到旧数据而不是修改后的数据
与 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
请您对此问题有所了解，非常感谢您的帮助
答案 0 :(得分：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 ...");
}
我没有测试过这段代码，但它应该非常接近你需要做的工作。