twoway-databindingにはngModel
を使用してください。チェックボックスについてhttps://plnkr.co/edit/smMSiJnSXJQHOxW5Pi45?p=preview
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'
import {FormsModule} from '@angular/forms'
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello {{name}}</h2>
<br />
<div *ngFor="let radiobtn of options.radiobuttons">
<h4>{{radiobtn.name}}</h4>
<div *ngFor="let val of radiobtn.values">
<input [name]="radiobtn.name" type="radio" [value]="val" [(ngModel)]="radiobtn.selection" (ngModelChange)="onChange()" />
<label>{{val}} years</label>
</div>
<br />
Selected: {{radiobtn.selection ? radiobtn.selection : 'none'}}
<br />
</div>
<br />
<br />
<div *ngFor="let chkbx of options.checkboxes">
<input type="checkbox" [(ngModel)]="chkbx.val" (ngModelChange)="onChange()" />
<label>{{chkbx.name}}</label>
</div>
<br />
<br />
<div *ngFor="let inpt of options.inputs">
<label>{{inpt.name}}</label>
<input type="text" [(ngModel)]="inpt.val" (ngModelChange)="onChange()" />
</div>
<br />
<br />
<button (click)="reset()">reset!</button>
</div>
`,
})
export class App {
options = {
radiobuttons: [
{ name: 'ages1', values: [1,2,3,4,5,6,7,8,9], selection: undefined },
{ name: 'ages2', values: [65,66,68,90], selection: undefined }
]
checkboxes: [
{ name: 'checkbox1', val: false },
{ name: 'checkbox2', val: false },
{ name: 'checkbox3', val: true },
{ name: 'checkbox4', val: false }
],
inputs: [
{ name: 'input 1', val: '' },
{ name: 'input 2', val: 'aksjd' },
{ name: 'input 3', val: '' },
{ name: 'input 4', val: '' },
{ name: 'input 5', val: '123' }
]
}
name:string;
constructor() {
this.name = 'Angular2'
}
onChange() {
// .. call filter(this.selectedAge)
console.log(this.options);
}
reset() {
this.options.radiobuttons.forEach(r => r.selection = false);
this.options.checkboxes.forEach(c => c.val = false);
this.options.inputs.forEach(i => i.val = '';
this.onChange();
}
}
@NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ App ],
bootstrap: [ App ]
})
export class AppModule {}
と何:
および変更の検出が
(ngModelChange)
を介して行うことができます。..は、この作業のデモを参照してください? onchangeはチェックイベントとアンチェックイベントの両方を記録します。ユーザーがチェックを入れるかどうかをチェックするにはどうすればよいですか? 100個のチェックボックス/ラジオ入力が画面上にあるとします。 –
私の更新された回答を参照し、いくつかのチェックボックスを追加しました。 – mxii
前述のように、100個のチェックボックスに100個の変数を追加することはできません。また、配列の値も文字列であるため、配列を使用します。 –