当从下拉列表中移除某个选项后，若表单数据仍包含该已删除值，需确保下拉框初始显示该值（作为选中状态），但展开时仅展示当前有效的可选项，不包含已删除项。
当从下拉列表中移除某个选项后，若表单数据仍包含该已删除值，需确保下拉框初始显示该值（作为选中状态），但展开时仅展示当前有效的可选项，不包含已删除项。
在使用 oi-select（如基于 AngularJS 的第三方下拉组件）时，常见的需求是：UI 展示需兼顾“数据一致性”与“用户体验”——即后端或业务逻辑可能保留历史值（如用户曾选择过已下线的选项），但前端下拉菜单只应允许用户从当前有效选项中重新选择。
核心实现思路
关键在于分离“显示值（view value）”与“可选项列表（available options）”：
-
ng-model绑定的selectedValue可以是任意合法字符串/对象（包括已删除项）； - 而
oi-option渲染的selectionList仅包含当前可用的两个选项； - 若
selectedValue不在selectionList中，则需临时补充一个仅用于显示的<oi-option></oi-option>（不可选、不可交互），使其在折叠态可见，但展开时隐藏。
推荐实现方式（AngularJS + oi-select）
<oi-select ng-model="formData.category" oi-options="item.value as item.label for item in availableOptions track by item.value" placeholder="请选择..."></oi-select>
// Controller 中动态构建 options
$scope.availableOptions = [
{ value: 'A', label: '选项 A' },
{ value: 'B', label: '选项 B' }
];
// 假设后端返回的历史值为 'C'（已从 availableOptions 中移除）
$scope.formData = {
category: 'C' // 该值不在 availableOptions 中
};
// ✅ 动态扩展 options：仅当 selectedValue 不存在时，添加一个「占位选项」用于显示
$scope.getDisplayOptions = function() {
const current = $scope.formData.category;
const exists = $scope.availableOptions.some(opt => opt.value === current);
if (exists) {
return $scope.availableOptions;
} else {
// 返回原始选项 + 一个只读占位项（ng-if 控制其仅在非展开时渲染）
return [
...$scope.availableOptions,
{
value: current,
label: `[已停用] ${current}`,
disabled: true
}
];
}
};
然后在模板中使用：
<oi-select ng-model="formData.category" oi-options="item.value as item.label for item in getDisplayOptions() | filter:{disabled:false}" placeholder="请选择..."><!-- 额外添加一个隐藏的占位 option（仅用于显示选中值，不参与筛选） --><oi-option ng-if="!isDropdownOpen && formData.category && !availableOptions.some(o => o.value === formData.category)" value="{{formData.category}}" label="{{'[已停用] ' + formData.category}}" disabled></oi-option></oi-select>
? 提示：
oi-select通常支持is-open或类似属性监听展开状态（如oi-is-open）。若组件未暴露该状态，可通过ng-focus/ng-blur模拟，或使用$timeout延迟判断。
注意事项
- ❌ 避免直接修改
availableOptions数组并push()已删除值——这会导致该值出现在下拉列表中，破坏业务约束； - ✅ 正确做法是条件性渲染一个视觉占位项，且设置
disabled="true"并配合ng-if确保其仅在折叠态可见； - ⚠️ 后端接口应明确区分「当前可选项」与「历史取值」，前端不应擅自恢复已删除项的可选性；
- ? 用户一旦重新选择，应清除该“已停用”状态，并同步更新模型，避免脏数据残留。
通过这种设计，既满足了数据回显的完整性要求，又保障了交互逻辑的严谨性——用户清晰感知到所选值已失效，同时被引导至有效选项完成修正。
