In my angular.js single page application, I am retrieving initial data from a rest endpoint.
The data consists of a list of IDs representing saved models and a tree of options for cascading dropdowns.
How can I automatically set the default path in the tree based on the IDs from the model?
Here is some sample code:
Models:
DefaultOptions = [
{"Id" : 044},
{"Id" : 142},
{"Id" : 244}
];
OptionsTree = [
{"Text" : "Option1",
"subOptions" : [
{"Text" : "SubOption1", "Id" : 044},
{"Text" : "SubOption2", "Id" : 142}
]},
{"Text" : "Option2",
"subOptions" : [
{"Text" : "SubOptionA", "Id" : 3033},
{"Text" : "SubOptionB", "Id" : 244}
]}
];
HTML:
<div ng-repeat="member in DefaultOptions">
<select ng-model="option"
ng-options="o as o.Text for o in OptionsTree">
</select>
<select ng-model="subOption"
ng-options="s as s.Text for s in option.subOptions"
ng-disabled="!option"
ng-change="member.Id = subOption.Id">
</select>
</div>
While this HTML code successfully updates the ID in DefaultOptions when a new selection is made, it does not set a default. What is missing here?