Bootstrap Modal修改数据时意外变更不同作用域变量问题咨询

嘿，这个问题我太熟悉啦！我来帮你拆解下～

首先，你遇到的这个“看似不同变量却联动修改”的问题，本质是AngularJS中对象的引用类型特性在搞鬼！

你大概率是在打开Modal的时候，直接把列表里的对象赋值给了Modal的scope变量，比如写了类似$scope.editItem = item;这样的代码。虽然你感觉这是两个不同的变量，但实际上它们指向的是内存中的同一个对象实例——就像两个人拿着同一把房间钥匙，不管谁开门，房间里的东西都会被改变。所以你在Modal里修改editItem的属性时，列表里的原对象自然会同步变化。

要解决这个问题，关键是切断两个变量的引用关联，给Modal创建一个完全独立的对象副本。AngularJS提供了专门的angular.copy()方法来做深拷贝，它会递归复制对象的所有属性，生成一个全新的对象实例。

具体实现步骤： #

1. 打开Modal时深拷贝对象：
   把原来直接赋值的代码，改成用angular.copy()创建副本：

   $scope.openEditModal = function(selectedItem) {
     // 深拷贝原对象，生成独立副本
     $scope.editFormData = angular.copy(selectedItem);
     // 触发Modal显示
     $('#yourEditModalId').modal('show');
   };
   

2. 保存修改时同步回列表：
   当用户确认修改后，再把副本的内容同步回原列表的对应项，这样列表才会更新修改后的数据：

   $scope.saveEditChanges = function() {
     // 找到原列表中对应的对象索引
     const targetIndex = $scope.itemList.findIndex(item => item.id === $scope.editFormData.id);
     if (targetIndex !== -1) {
       // 把修改后的副本内容同步回原列表
       $scope.itemList[targetIndex] = angular.copy($scope.editFormData);
     }
     // 关闭Modal
     $('#yourEditModalId').modal('hide');
   };
   

这样修改后，你在Modal里编辑的是独立的对象副本，不会实时影响页面列表，只有点击保存后才会更新原数据，完全符合你想要的编辑逻辑～

内容的提问来源于stack exchange，提问作者Suvojit