In Angular2, I want to create a cascading select for the given array object of xs and ys:
data:Array<Object> =
[
{"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},
{"x":75, "ys":[ 15,20,25,30,35,40,45]}
];
The first select is populated with x and second with the corresponding ys.
Following is the select code for x.
<select [(ngModel)]="x">
<option *ngFor="#n of data" [attr.value]="n.x">{{n.x}}</option>
</select>
How to polulate the second select with ys based on the selcted x value?
I have created a plunkr
This might be what you are looking for:
Plunker example
I would leverage selectedIndex like this:
See also working example https://plnkr.co/edit/W3avXWmcmWFpBhS14LGP?p=preview
Semantic UI version here https://plnkr.co/edit/4TIdWBNwk0wKR4ndKdzJ?p=preview