当动态删除下拉选项时，需确保已保存的旧值仍能作为默认选中项显示，但不在可展开的选项列表中出现——即实现“视觉隔离”：选中态可见，编辑态不可选。
当动态删除下拉选项时，需确保已保存的旧值仍能作为默认选中项显示，但不在可展开的选项列表中出现——即实现“视觉隔离”：选中态可见，编辑态不可选。
在使用 oi-select（AngularJS 生态下的第三方下拉组件）时，常见需求是：后端或业务逻辑删除了某个选项（如原选项为 ['A', 'B', 'C']，现仅保留 ['A', 'B']），但某条已有数据仍关联已删除的 'C'。此时页面加载后，下拉框应正确显示 'C' 为当前选中值（保证数据一致性与用户感知），但展开下拉菜单时仅列出 'A' 和 'B'（避免用户误选无效值）。
该问题本质是分离“显示值（view value）”与“可选值（available options）”。oi-select 默认将 ng-model 绑定值限制在 oi-option 渲染集合内，因此需手动扩展选项集以兼容历史值。
✅ 推荐实现方式（两种等效方案）：
方案一：动态扩充选项数组（推荐）
在控制器中，于初始化时检查 selectedValue 是否存在于当前 optionsList 中；若不存在，则临时追加该值（仅用于渲染选中态）：
// AngularJS controller
$scope.optionsList = ['A', 'B']; // 当前有效选项
$scope.selectedValue = 'C'; // 来自表单/数据的旧值
// 确保选中值在下拉中“可见”
if ($scope.optionsList.indexOf($scope.selectedValue) === -1) {
$scope.displayOptions = $scope.optionsList.concat([$scope.selectedValue]);
} else {
$scope.displayOptions = $scope.optionsList;
}
模板中绑定 displayOptions 而非原始 optionsList：
<oi-select ng-model="selectedValue" oi-options="opt as opt for opt in displayOptions"></oi-select>
⚠️ 注意：此方式下 'C' 会出现在下拉菜单末尾。若需完全隐藏 'C' 在菜单中（仅保留为选中态），请采用方案二。
方案二：用 ng-if 控制“兜底选项”渲染（更精准）
利用 oi-option 的重复渲染机制，显式添加一个条件性选项，仅当 selectedValue 不在有效列表中时才渲染该“占位项”：
<oi-select ng-model="selectedValue" placeholder="Select..."><!-- 正常循环有效选项 --><oi-option ng-repeat="opt in optionsList" value="{{opt}}">
{{opt}}
</oi-option><!-- 仅当 selectedValue 是“孤儿值”时，渲染一个只读占位项（不参与选择） --><oi-option ng-if="optionsList.indexOf(selectedValue) === -1 && selectedValue !== null" value="{{selectedValue}}" disabled>
{{selectedValue}} <small>(已停用)</small>
</oi-option></oi-select>
? 关键要点：
-
disabled="true"防止用户点击切换到该选项； -
ng-if确保该选项仅在必要时存在，不影响正常选项列表； - 不要使用
ng-show/ng-hide—— 它们仅控制可见性，oi-select仍会将其纳入可交互选项池； - 若需样式隔离，可为禁用项添加 CSS 类（如
.oi-option[disabled] { opacity: 0.6; }）。
? 总结：核心思路是“选中态与可选态解耦”。通过条件渲染或数组扩展，让 UI 同时满足数据真实性（显示真实值）与业务约束性（仅允许选择有效值）。该模式同样适用于其他类似场景，如权限变更导致选项失效、多环境配置差异等。
