在 Angularjs-chosen 中选择模型时禁用重新选择

Question

我需要以下情况的帮助：

我在表格中使用单选下拉菜单。每行都有自己的下拉菜单。 现在有 2 个选项可以更改选择：

1. 单击取消选择 ('x') 图标（工作正常 - 通过 ng-change）。

2. 打开下拉列表，从列表中选择另一个值。覆盖之前的值（虽然 ng-change 会触发，但我无法知道它是新值还是覆盖值）。

我希望禁用第二种行为。是否可以“告诉”选择了一旦选择了一个值，重新选择新值的唯一方法是单击“x”？ 例如：选择一个值后，禁用下拉菜单，隐藏“箭头”图标，但保持“x”取消选择图标处于活动状态？

<select chosen
                            allow-single-deselect="true"
                            placeholder-text-single="'Select'
                            ng-model="row.userSelection"
                            ng-options="field as field.name for field in vm.fields">
                        <option value=""></option>
                    </select>

谢谢。

Answer 1

添加 ng-disabled="$ctrl.model" 将禁用选择，直到 "x" 清除 $ctrl.model。清除后，选择将重新启用，并且可以进行新的选择。

快速浏览后我唯一能想到的就是从 ng-options 转换为 ng-disabled 并在实际的 option 元素上使用 ng-disabled。文档说您可以隐藏禁用的选项，例如，如果您选择 OPTION1 并且 OPTION[2-4] 被禁用，它们将从列表中删除。

我找到了一个 1.0 版的 plunker，但它不起作用。使选项失效仍然会在列表中显示它们，尽管当您选择它们​​时会使它们未定义。也许更新了更新的版本以实际删除它们。