解决ui-select移除选中对象后DOM未更新的问题

看起来你已经找对了方向——用ui-select-choices的refresh属性来更新选项列表，但问题出在删除数组元素的方式不对，而且可能Angular的脏检查没正确捕捉到数组变化。让我一步步帮你修正：

问题分析 #

你当前用$scope.allNutrientes.pop(目标元素)来删除项，但pop()方法只能删除数组的最后一个元素，根本不会定位并删除你指定的$scope.tablaCnaGeneralInsertada[i].nutriente。这就是为什么你控制台能看到目标项，但DOM里选项还存在的核心原因！

另外，就算删除方式正确，直接修改原数组有时候Angular的脏检查机制可能不会立刻感知到变化，我们需要用Angular能识别的方式修改数组。

解决方案 #

1. 正确删除指定数组元素 #

遍历allNutrientes找到要删除项的索引，用splice()方法删除（这是Angular能识别的数组修改方式）：

$scope.refreshNutrientesList = function () {
  // 遍历要移除的营养元素列表
  angular.forEach($scope.tablaCnaGeneralInsertada, function(item) {
    var targetNutriente = item.nutriente;
    // 找到目标元素在allNutrientes中的索引（根据对象唯一标识匹配，比如id）
    var index = $scope.allNutrientes.findIndex(function(n) {
      return n.id === targetNutriente.id;
    });
    // 如果找到有效索引，就删除该项
    if (index !== -1) {
      $scope.allNutrientes.splice(index, 1);
      console.log("已移除营养元素:", targetNutriente);
    }
  });
};

2. 确保refresh正确触发 #

你已经在ui-select-choices上绑定了refresh=refreshNutrientesList()，需要注意：

• 这个refresh函数默认会在用户搜索时自动触发，但如果你需要在特定事件（比如点击按钮、提交表单）触发，需要手动调用$scope.refreshNutrientesList()，并且确保调用在Angular的上下文里。
• 如果是在Angular之外的原生JS事件中触发，需要手动调用$scope.$apply()来强制触发脏检查：

// 示例：在自定义按钮点击事件中触发
$scope.onRemoveEvent = function() {
  $scope.refreshNutrientesList();
  // 若触发事件不在Angular上下文内，添加以下代码
  // $scope.$apply();
};

3. 额外优化：用过滤副本替代修改原数组（可选） #

如果你不想修改原allNutrientes数组，可以创建一个过滤后的副本，这样更符合Angular的数据流向，也避免原数组被意外修改：

<ui-select data-ng-model="selectedNutriente.selected" theme="bootstrap" name="selectNutriente">
  <ui-select-match placeholder="Elija un Nutriente...">
    <strong>{{$select.selected.abreviatura}}</strong> {{$select.selected.nombre}}
    <small><strong>Tipo de Dato:</strong> {{$select.selected.idTiposDatosAlimentos.nombreTipoDato}}</small>
  </ui-select-match>
  <ui-select-choices repeat="a in filteredNutrientes| filter: $select.search" group-by="groupByNombreTipoDato" refresh=refreshNutrientesList()>
    <strong>{{a.abreviatura}}</strong> {{a.nombre}}
  </ui-select-choices>
</ui-select>

// 初始化过滤后的数组
$scope.filteredNutrientes = angular.copy($scope.allNutrientes);

$scope.refreshNutrientesList = function () {
  // 获取已选中营养元素的id集合
  var selectedIds = $scope.tablaCnaGeneralInsertada.map(item => item.nutriente.id);
  // 过滤掉已选中的项，生成新的可选列表
  $scope.filteredNutrientes = $scope.allNutrientes.filter(n => !selectedIds.includes(n.id));
};

验证要点 #

• 确认targetNutriente的匹配条件（比如n.id === targetNutriente.id）是正确的，要根据你对象的唯一标识来写，不能随便匹配。
• 检查控制台是否输出了"已移除营养元素"，并且索引是有效的（不是-1）。
• 如果还是没更新，尝试在函数末尾加上$scope.$apply()强制触发脏检查。

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