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"},
];
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>