javascriptangularjsmodel-view-controllerhtml-selectangularjs-ng-model

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


I need 3 dropdown list with same values. 1st dropdown is mandatory to select. The rest 2 is optional

all 3 dropdown lists has same options. If user selects a certain option in dropdown 1, it will be disabled for other dropdowns. After the 3 dropdowns is selected, the selected values will be shown as a text in the same page. This text will be then pushed into db. The db field is selected_option.

I am new to angular and kinda stuck so long in this. What am I missing here? Please help :(

This is in my view

          <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>

This is in my controller

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

Solution

  • Instead of using ng-options you can use ng-repeat to display all options. And by using ng-disabled you can disable few options.

    <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>