javascript - 如何从下拉列表中隐藏已选择的值？

Question

我需要从下拉列表中隐藏已选择的值。

例如，我的下拉菜单有 2 个选项:

• 已取消
• 已确认

如果用户选择“取消”选项 - 下拉列表不应包含所选选项。在这种情况下，下拉列表中应该只有一个“确认”选项可用。

如果用户选择“确认”选项 - 下拉列表应包含唯一一个“取消”选项。

换句话说 - 我需要在选择中显示选定的值(例如“已取消”)，但不在下拉列表(下拉列表将包含唯一的“已确认”值)。

问题是 - 是否可以实现，如果可以 - 如何实现？

我在前端使用 AngularJS。

<select ng-options="status.id as status.name for status in appt.possibleStatuses" 
   ng-model="appt.statusId">
</select>

我知道，可以使用自定义 UI 控件来实现，但我想通过默认的 select 标记来实现。

但是，如果您知道在不使用 select 标签的情况下解决此问题的简单且良好的解决方案 - 不客气:)

谢谢!

Answer 1

您可以使用函数代替appt.possibleStatuses

<select ng-options="status.id as status.name for status in filterFunction()" 
   ng-model="appt.statusId">
</select>

在你的 Controller 代码中

$scope.filterFunction = function () {
    var statuses = $scope.appt.possibleStatuses;
    // any custom filter logic for statuses
    return statuses;
}