我有这段代码:
for (var i = 0; i < $scope.groups.length; i++) {
$http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson($scope.groups[i]))
.then(function (response) {
console.log(response.data.Data[0])
$scope.groups[i] = response.data.Data[0];
})
.catch(function(err) {
var errorMsg = "Error saving recruiting group. Contact support.";
$.jGrowl(errorMsg, { header: 'Error' });
error = true;
});
}
工作和保存就好了。但不是覆盖我的$ scope.groups [i]而是创建一个副本。
保存之前:&gt;
保存后:&gt;
我已经在日志中检查了$ scope.groups,确定它已经被欺骗了。为什么?我该如何解决?
答案 0 :(得分:1)
您有一个在异步调用中访问共享变量的经典问题。当您的异步调用运行时,循环将耗尽,i
将具有迭代的最后一个值。在你的情况下,i
将是$scope.groups.length
。因此,解决方法是让您的回调获得自己的i
迭代实例,而不是共享i
。此外,重新考虑您的通话也是一个好主意。
一种简单的方法是通过函数进行调用。
for (var i = 0, l=$scope.groups.length ; i < l; i++) {
performRequest(i);
}
function performRequest(i){
$http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson($scope.groups[i]))
.then(function (response) {
$scope.groups[i] = response.data.Data[0];
})
.catch(function(err) {
var errorMsg = "Error saving recruiting group. Contact support.";
$.jGrowl(errorMsg, { header: 'Error' });
error = true;
});
}
但当然更清洁的方式是: -
angular.forEach($scope.groups, performRequest)
function performRequest(group, i){
$http.post('/api/projects/' + data.Project.Id + '/recruiting-groups', angular.toJson(group))
.then(function (response) {
angular.extend(group, response.data.Data[0]); //or $scope.groups[i] = response.data.Data[0];
})
.catch(function(err) {
var errorMsg = "Error saving recruiting group. Contact support.";
$.jGrowl(errorMsg, { header: 'Error' });
error = true;
});
}