点击复选框时如何将编辑后的ng-repeat数据推入另一个数组

我来帮你梳理这个需求的实现思路和具体代码，核心是通过监听复选框的状态变化，结合数据拷贝和数组操作，把编辑后的条目准确存入目标数组：

1. 先准备基础数据结构 #

假设我们有一个源数组（比如渲染复选框列表的subcenterList），每个条目包含编辑字段和复选框绑定的选中状态：

$scope.subcenterList = [
  { id: 1, name: "子中心A", customDesc: "", isSelected: false },
  { id: 2, name: "子中心B", customDesc: "", isSelected: false },
  // 更多子中心项...
];
$scope.selectedEditedItems = []; // 用来存放选中的、经过编辑的数据

2. 页面模板：用ng-repeat渲染复选框和编辑区域 #

把源数组渲染成带复选框和编辑输入的条目，同时给复选框绑定ng-change事件：

<div class="row" ng-repeat="subcenter in subcenterList">
  <div class="col-md-4">
    <div class="form-group">
      <label>
        <input type="checkbox" ng-model="subcenter.isSelected" ng-change="handleCheckboxChange(subcenter)">
        {{subcenter.name}}
      </label>
      <!-- 编辑输入框，绑定到当前条目的自定义字段 -->
      <input type="text" class="form-control" ng-model="subcenter.customDesc" placeholder="输入备注">
    </div>
  </div>
</div>

<!-- 可选：展示已选中的编辑后数据 -->
<div class="mt-3">
  <h4>已选中的编辑后数据</h4>
  <div ng-repeat="item in selectedEditedItems">
    {{item.name}} - 备注：{{item.customDesc}}
  </div>
</div>

3. 实现复选框状态变化的处理函数 #

在控制器里定义handleCheckboxChange函数，处理勾选/取消勾选的逻辑：

$scope.handleCheckboxChange = function(currentItem) {
  // 深拷贝当前条目：避免后续编辑源数据时，同步修改已选中数组里的内容（如果需要实时同步可以跳过拷贝）
  const itemSnapshot = angular.copy(currentItem);

  if (currentItem.isSelected) {
    // 勾选时：先判断是否已存在，避免重复添加
    const isAlreadySelected = $scope.selectedEditedItems.some(item => item.id === currentItem.id);
    if (!isAlreadySelected) {
      $scope.selectedEditedItems.push(itemSnapshot);
    }
  } else {
    // 取消勾选时：从目标数组移除对应条目
    $scope.selectedEditedItems = $scope.selectedEditedItems.filter(item => item.id !== currentItem.id);
  }
};

几个关键细节要注意 #

• 为什么用深拷贝？：AngularJS里对象是引用类型，如果直接把源数组的currentItem推入目标数组，后续修改源条目时，目标数组里的内容也会跟着变。如果需要保存勾选那一刻的编辑状态，一定要用angular.copy()；如果希望目标数组实时同步源条目的编辑内容，就可以不用拷贝，直接操作原对象。
• 用ng-change而非ng-click：ng-click会在ng-model更新前触发，导致获取的isSelected状态不准确，ng-change是模型更新后才触发，状态更可靠。
• 去重逻辑：通过条目的唯一标识（比如id）判断是否已存在，避免同一条目被多次推入目标数组。

针对你提供的多选下拉框补充 #

你给出的代码片段里是多选下拉框，如果需求是把下拉框选中的子中心（带编辑字段）推入数组，也可以用类似逻辑：

$scope.GetVillage = function(selectedSubcenters) {
  // 把选中的子中心深拷贝后存入目标数组，或者做去重处理
  $scope.selectedSubcenters = angular.copy(selectedSubcenters);
};

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