如何在 angular js 中禁用其他选项并在具有相同值的多个下拉列表中附加值？

Question

我需要 3 个具有相同值的下拉列表。第一个下拉菜单对于 select 是强制性的。其余2个可选

所有 3 个下拉列表都有相同的选项。如果用户 select 在下拉列表 1 中选择了某个选项，则其他下拉列表将禁用该选项。在 3 个下拉列表被 selected 之后，selected 值将在同一页面中显示为文本。该文本随后将被推送到数据库中。数据库字段是 selected_option.

我是 angular 的新手，并且在这方面停留了很长时间。我在这里错过了什么？请帮助:(

这是我的看法

          <div class="row form-group">
           Selected:
           Dropdown 1 : <select class="form-control" ng-model="selected_option[0]" 
ng-options="option.value as option.text for option in params">
           </select>
        </div>
        <div class="row form-group">
           Selected:
           Dropdown 2 : <select class="form-control" ng-model="selected_option[1]" 
ng-options="option.value as option.text for option in params">
           </select>
        </div>
        <div class="row form-group">
           Selected:
           Dropdown 3 : <select class="form-control" ng-model="selected_option[2]" 
ng-options="option.value as option.text for option in params">
           </select>
    
    {{ selected_option }}
        </div>

这是我的控制器

 $scope.selected_option = [];
  $scope.params= [
                                {value: "A", text: "A"},
                                {value: "B", text: "B"},
                                 {value: "C", text: "C"},
                               
                            ];

Answer 1

您可以使用 ng-repeat 而不是使用 ng-options 来显示所有选项。通过使用 ng-disabled 你可以禁用一些选项。

<div class="row form-group">
    Selected:
    Dropdown 1 : 
    <select class="form-control" ng-model="selected_option[0]">
        <option ng-repeat="option in params" ng-value="option.value">{{ option.value }}</option> 
    </select>
</div>
<div class="row form-group">
    Selected:
    Dropdown 2 : 
    <select class="form-control" ng-model="selected_option[1]">
        <option ng-repeat="option in params" ng-value="option.value" ng-disabled="option.value == selected_option[0]">{{ option.value }}</option> 
    </select>
</div>
<div class="row form-group">
    Selected:
    Dropdown 3 : 
    <select class="form-control" ng-model="selected_option[2]">
        <option ng-repeat="option in params" ng-value="option.value" ng-disabled="option.value == selected_option[0] || option.value == selected_option[1]">{{ option.value }}</option> 
    </select>
    {{ selected_option }}
</div>

如何在 angular js 中禁用其他选项并在具有相同值的多个下拉列表中附加值？

How to disable other options and append values in multiple dropdown with same values in angular js?

javascript

model-view-controller

html-select

angularjs

angularjs-ng-model