AngularJS中按索引插入数组元素且不替换未选中项的问题

我明白你遇到的问题了——你现在的数组操作逻辑混淆了数组的下标和数据对象里的index属性，导致选中中间索引的元素时错误替换了后面的项。咱们一步步来修复这个问题：

问题根源 #

你当前用splice(index, 1, data)时，这里的index是ng-repeat的循环下标，但你的数组里存储的是带index属性的对象，数组的实际下标和对象的index属性并不是一一对应的。比如当数组是[{"index":0,...},{"index":2,...}]时，数组的下标是0和1，这时候你调用splice(1,1,data)（对应第二个选择框的$index=1），就会把数组下标1的元素（也就是index=2的那个）替换掉，这就是你看到的错误现象。

另外还有一个潜在问题：所有选择框共用同一个ng-model="selectedExcel"，这会导致你选一个选择框时，其他所有选择框的选中值都会同步变化，这肯定不是你想要的。

解决方案 #

1. 修正HTML中的ng-model #

把共用的selectedExcel改成数组形式，让每个选择框对应独立的模型：

<tbody>
  <td ng-repeat="e in excelvalues">
    <select name="selectExcel" class="form-control" 
            ng-model="selectedExcel[$index]" 
            ng-options="excel for excel in excelvalues" 
            ng-change="change(selectedExcel[$index], $index)">
    </select>
  </td>
</tbody>

同时在控制器里初始化这个数组：

$scope.selectedExcel = [];

2. 重写change函数的逻辑 #

我们需要先判断数组中是否已经存在对应index属性的元素：

• 如果存在：直接更新该元素
• 如果不存在：找到正确的位置插入，保持数组按index属性排序

修改后的JS代码：

$scope.arr = []; // 确保数组已初始化
$scope.selectedExcel = [];

$scope.change = function(excel, index) {
  var data = { index: index, risk_disc_en: excel };
  
  // 查找数组中是否已有该index的元素
  var existingItemIndex = $scope.arr.findIndex(item => item.index === index);
  
  if (existingItemIndex !== -1) {
    // 存在则更新对应元素
    $scope.arr[existingItemIndex] = data;
  } else {
    // 不存在则找到合适位置插入，保持数组按index升序排列
    var insertPosition = $scope.arr.findIndex(item => item.index > index);
    if (insertPosition === -1) {
      // 所有元素的index都小于当前值，插在数组末尾
      $scope.arr.push(data);
    } else {
      // 插入到第一个index大于当前值的元素前面
      $scope.arr.splice(insertPosition, 0, data);
    }
  }
};

验证场景 #

• 场景1：数组现有[{"index":0,"risk_disc_en":"Risk Description"},{"index":2,"risk_disc_en":"Impact"}]，选中第二个选择框（index=1）时：

  1. 找不到index=1的元素，进入插入逻辑
  2. 找到第一个index>1的元素是index=2，插入位置为1
  3. 数组变为[{"index":0,...},{"index":1,...},{"index":2,...}]，符合预期

• 场景2：数组现有上述元素，再次选中第三个选择框（index=2）时：

  1. 找到index=2的元素在数组下标1的位置
  2. 直接更新该元素的risk_disc_en值，数组保持[{"index":0,...},{"index":2,...}]，符合预期

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