Angular2 级联 Select
Angular2 Cascading Select
在 Angular2 中,我想为给定的 xs 和 ys 数组对象创建级联 select:
data:Array<Object> =
[
{"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},
{"x":75, "ys":[ 15,20,25,30,35,40,45]}
];
第一个 select 填充 x,第二个填充相应的 ys。
以下是 x 的 select 代码。
<select [(ngModel)]="x">
<option *ngFor="#n of data" [attr.value]="n.x">{{n.x}}</option>
</select>
如何根据选择的x值用ys填充第二个select?
我创建了一个plunkr
这可能是您要找的:
@Component({
selector: 'my-app',
providers: [],
template: `
<select [(ngModel)]="x">
<option *ngFor="let n of data" [ngValue]="n.x">{{n.x}}</option>
</select>
<select [(ngModel)]="y">
<option *ngFor="let n of data[x == 50 ? 0 : 1].ys" [ngValue]="n">{{n}}</option>
</select>
<div>{{data[x == 50 ? 0 : 1].ys}}</div>
`,
directives: []
})
export class App {
x = 50;
data:Array<Object> = [
{"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},
{"x":75, "ys":[ 15,20,25,30,35,40,45]}
];
}
我会像这样利用 selectedIndex:
<select [ngModel]="x" (ngModelChange)="x = $event; second.selectedIndex = 0" #first>
<option *ngFor="#n of data" [attr.value]="n.x">{{n.x}}</option>
</select>
<select [(ngModel)]="y" #second>
<option *ngFor="#n of data[first.selectedIndex].ys" [attr.value]="n">{{n}}</option>
</select>
...
export class App {
x: number = 50;
y: number = 10;
data:Array<Object> =
[
{"x":50, "ys": [10, 15, 20, 25, 30, 35]},
{"x":75, "ys": [15, 20, 25, 30, 35, 40, 45]},
{"x":100, "ys": [25, 35, 40, 45, 55, 65]}
];
}
另请参阅工作示例 https://plnkr.co/edit/W3avXWmcmWFpBhS14LGP?p=preview
语义UI版本在这里https://plnkr.co/edit/4TIdWBNwk0wKR4ndKdzJ?p=preview
在 Angular2 中,我想为给定的 xs 和 ys 数组对象创建级联 select:
data:Array<Object> =
[
{"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},
{"x":75, "ys":[ 15,20,25,30,35,40,45]}
];
第一个 select 填充 x,第二个填充相应的 ys。
以下是 x 的 select 代码。
<select [(ngModel)]="x">
<option *ngFor="#n of data" [attr.value]="n.x">{{n.x}}</option>
</select>
如何根据选择的x值用ys填充第二个select?
我创建了一个plunkr
这可能是您要找的:
@Component({
selector: 'my-app',
providers: [],
template: `
<select [(ngModel)]="x">
<option *ngFor="let n of data" [ngValue]="n.x">{{n.x}}</option>
</select>
<select [(ngModel)]="y">
<option *ngFor="let n of data[x == 50 ? 0 : 1].ys" [ngValue]="n">{{n}}</option>
</select>
<div>{{data[x == 50 ? 0 : 1].ys}}</div>
`,
directives: []
})
export class App {
x = 50;
data:Array<Object> = [
{"x":50, "ys":[ 10, 15, 20, 25, 30, 35]},
{"x":75, "ys":[ 15,20,25,30,35,40,45]}
];
}
我会像这样利用 selectedIndex:
<select [ngModel]="x" (ngModelChange)="x = $event; second.selectedIndex = 0" #first>
<option *ngFor="#n of data" [attr.value]="n.x">{{n.x}}</option>
</select>
<select [(ngModel)]="y" #second>
<option *ngFor="#n of data[first.selectedIndex].ys" [attr.value]="n">{{n}}</option>
</select>
...
export class App {
x: number = 50;
y: number = 10;
data:Array<Object> =
[
{"x":50, "ys": [10, 15, 20, 25, 30, 35]},
{"x":75, "ys": [15, 20, 25, 30, 35, 40, 45]},
{"x":100, "ys": [25, 35, 40, 45, 55, 65]}
];
}
另请参阅工作示例 https://plnkr.co/edit/W3avXWmcmWFpBhS14LGP?p=preview
语义UI版本在这里https://plnkr.co/edit/4TIdWBNwk0wKR4ndKdzJ?p=preview