Currently, I am working on an input form that involves a select with various options. Depending on the user's selection, three additional fields need to be populated accordingly.
For instance:
If the user picks Option1, then the three other fields should display text 1_1, 1_2, and 1_3. If the user opts for Option2, then the three other fields should show text 2_1, 2_2, and 2_3.
What is the most effective way to achieve this?
I came across this method:
Assigning a variable in the scope
$scope.select_options = [
{"name": "Option1",
"field1": "1_1",
"field2": "1_2",
"field3": "1_3"},
{"name": "Option2",
"field1": "2_1",
"field2": "2_2",
"field3": "2_3"},
{"name": "Option3",
"field1": "3_1",
"field2": "3_2",
"field3": "3_3"}
];
Here is the corresponding HTML code
<select ng-model="opt_select"
ng-options="option as option.name for option in select_options"
ng-init="opt_select = opt_select || select_options[0]" id="well"
name="company" class="input"></select>
<input id="field1" name="field1" placeholder="" class="input" type="text"
ng-model="opt_select.field1">
<input id="field3" name="field2" placeholder="" class="input" type="text"
ng-model="opt_select.field2">
<input id="field3" name="field3" placeholder="" class="input" type="text"
ng-model="opt_select.field3">
Does this setup seem appropriate?