AngularJS复用模态框增改国家：解决表格实时同步修改问题

嘿，这个问题我之前帮好几个AngularJS新手捋顺过，核心其实就是别直接绑定表格里的原数据对象，搞个副本用来在模态框里折腾就搞定啦！下面给你一步步拆解实现方法：

1. 编辑时创建原数据的深拷贝 #

当你点击表格里的“编辑”按钮时，不要直接把选中的国家对象丢给模态框的绑定变量，而是用AngularJS自带的angular.copy()做个深拷贝。这样模态框里的操作只会影响副本，原表格数据完全不受干扰。

示例代码：

$scope.openEditModal = function(selectedCountry) {
  // 深拷贝原对象，切断和原数据的引用关联
  $scope.modalCountry = angular.copy(selectedCountry);
  // 这里写打开模态框的代码，比如用UI Bootstrap的$uibModal.open()
};

为啥用angular.copy()？因为普通的赋值（比如$scope.modalCountry = selectedCountry）是浅拷贝，两个变量会指向同一个内存地址，改一个另一个也跟着变——这就是你现在遇到的问题根源。

2. 模态框表单绑定副本对象 #

把模态框里的所有输入框ng-model都绑定到刚才创建的副本modalCountry上，而不是原表格的对象。比如：

<div class="modal-content">
  <div class="modal-body">
    <div class="form-group">
      <label>国家名称</label>
      <input type="text" class="form-control" ng-model="modalCountry.name">
    </div>
    <div class="form-group">
      <label>国家代码</label>
      <input type="text" class="form-control" ng-model="modalCountry.code">
    </div>
  </div>
</div>

这时候你在模态框里输入任何内容，只会修改副本，表格里的原数据纹丝不动，完美实现“预览修改”的效果。

3. 点击更新时同步副本到原数据 #

当用户确认修改、点击“更新”按钮时，再把副本的数据同步回原数组里的对应对象。可以用angular.extend()来合并属性，或者直接替换对象（看你的数据结构复杂度）。

示例代码：

$scope.confirmUpdate = function() {
  // 找到原数组中对应的国家对象
  const targetIndex = $scope.countries.findIndex(country => country.id === $scope.modalCountry.id);
  if (targetIndex !== -1) {
    // 用extend把副本的属性覆盖到原对象上
    angular.extend($scope.countries[targetIndex], $scope.modalCountry);
    // 如果是简单对象，也可以直接替换：$scope.countries[targetIndex] = angular.copy($scope.modalCountry);
  }
  // 关闭模态框的代码
};

4. 兼容新增功能 #

同一个模态框要支持新增的话，初始化的时候直接创建一个空的对象就行，不用拷贝：

$scope.openAddModal = function() {
  // 初始化空对象用于新增
  $scope.modalCountry = { name: '', code: '' };
  // 打开模态框
};

$scope.confirmAdd = function() {
  // 把新对象加入原数组（记得拷贝一下，避免后续意外修改）
  $scope.countries.push(angular.copy($scope.modalCountry));
  // 关闭模态框
};

• 如果你的国家对象有嵌套属性（比如country.capital.name），angular.copy()依然能完美处理深拷贝，不用担心嵌套属性的关联问题。
• 要是你用的是第三方模态框组件（比如UI Bootstrap的Modal），记得把modalCountry通过resolve传到模态框控制器里，或者确保作用域能正确继承到这个变量。

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