本文介绍在前端下拉框（如 oi-select）中实现“显示已选值但不显示已删除选项”的技巧：即当模型绑定值属于已被移除的选项时，仍保持该值选中状态，但下拉展开列表仅呈现当前有效的可选项。
本文介绍在前端下拉框（如 `oi-select`）中实现“显示已选值但不显示已删除选项”的技巧：即当模型绑定值属于已被移除的选项时，仍保持该值选中状态，但下拉展开列表仅呈现当前有效的可选项。
在实际业务中，常遇到这样的场景：一个下拉框初始有 A、B、C 三个选项，用户之前已选择 C 并保存；后续因业务调整，C 被下线（即从可用选项列表中移除），此时页面重新加载，下拉框应依然显示 C 为当前选中值（保证数据一致性与用户体验），但展开下拉菜单时仅显示剩余的 A 和 B（避免用户误选已失效项）。
使用 oi-select 时，其默认行为是将 ng-model 值与 oi-option 列表严格对齐——若 model 值不在当前 options 数组中，下拉框往往显示为空或回退为 placeholder。要突破此限制，关键在于分离“显示值”与“可选列表”逻辑，而非依赖 ng-show（它仅控制元素可见性，不解决数据源不匹配问题）。
推荐两种稳健实现方式：
✅ 方案一：动态扩展选项列表（推荐）
在初始化时检测 ng-model 值是否存在于当前有效选项中，若不存在，则临时将其加入选项数组（仅用于渲染，不参与业务逻辑）：
<oi-select ng-model="formData.category" oi-options="item.value as item.label for item in safeOptions track by item.value"></oi-select>
// Controller 中
$scope.options = [
{ value: 'A', label: 'Category A' },
{ value: 'B', label: 'Category B' }
];
$scope.formData = { category: 'C' }; // 服务端返回的旧值
// 构建安全选项列表：确保已选值始终可见
$scope.safeOptions = function() {
const currentVal = $scope.formData.category;
const exists = $scope.options.some(opt => opt.value === currentVal);
if (exists) return $scope.options;
// 临时添加已选但已下线的项（仅 label 可读，value 不参与提交）
return $scope.options.concat({
value: currentVal,
label: `[已停用] ${currentVal}` // 或显示为 "C (不可选)"
});
};
⚠️ 注意：
safeOptions应定义为函数（而非数组），确保每次渲染时动态校验；同时建议后端接口明确返回deprecatedValues字段，便于前端统一处理。
✅ 方案二：双层 <oi-option></oi-option> 结构（兼容性更强）
利用 ng-if 控制额外选项的渲染，避免污染主选项数组：
<oi-select ng-model="formData.category"><!-- 主选项：仅显示当前有效项 --><oi-option ng-repeat="opt in options" value="{{opt.value}}">
{{opt.label}}
</oi-option><!-- 额外选项：仅当 model 值不在 options 中时显示 --><oi-option ng-if="options.findIndex(opt => opt.value === formData.category) === -1" value="{{formData.category}}">
[已停用] {{formData.category}}
</oi-option></oi-select>
? 关键总结
- ❌ 不要用
ng-show/ng-hide尝试隐藏无效<oi-option></oi-option>：oi-select内部可能缓存 DOM 或忽略隐藏项的绑定逻辑； - ✅ 始终以
ng-model为准源，选项列表为“可交互子集”； - ✅ 在 UI 层明确标识已停用项（如加灰、前缀提示），避免用户困惑；
- ✅ 若涉及表单提交，确保后端能正确处理此类“历史值”，或在提交前做合法性校验。
该模式不仅适用于 oi-select，也适用于 ui-select、ng-select 等主流下拉组件，核心思想是：视图可包容历史状态，交互须严守当前规则。
