Angularjs 保存后重复的$scope对象

我有一段代码：

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;
                            });
                    }

for（变量i=0；i<$scope.groups.length；i++）{
$http.post（'/api/projects/'+data.Project.Id+'/recruving groups'，angular.toJson（$scope.groups[i]））
.然后（功能（响应）{
console.log（response.data.data[0]）
$scope.groups[i]=response.data.data[0]；
})
.catch（函数（err）{
var errorMsg=“保存招聘组时出错。请与支持部门联系。”；
$.jGrowl（errorMsg，{header:'Error'}）；
错误=真；
});
}

工作和储蓄都很好。但是它没有覆盖我的$scope.groups[i]，而是创建了一个副本

保存前：>

保存后：>

---

我也在日志中检查了$scope.groups，果然它被欺骗了。为什么？如何修复它？

在异步调用中访问共享变量是一个经典问题。当为循环运行异步调用时，

i

将具有迭代的最后一个值。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;
     });
}

---

您是否调试了

i

的值？这是一个闭包问题您的

$http.post（）

调用都是异步的。

i

的值可能不是您期望的值，除非

$scope.groups.length

正好是1。啊，所以我应该从i中减去1$在异步调用完成之前，for..循环的scope.groups[i-1]应该已经运行。这意味着您将尝试更新

scope.groups[scope.groups.length]

。一种简单的修复方法将http cann放入一个方法中，并将

index（i）

作为参数，在循环中调用该方法。

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;
    });
}