Получение значения из флажка в angular 2 typescript
Я использую Angular 2 typescript. Я столкнулся с проблемой, мне нужно отправить форму, содержащую флажки. Мне нужны значения, которые находятся в атрибуте флажка. флажки динамические, поэтому любое количество флажков будет там.
<div class="checkbox" *ngFor="#label of labelList">
<div class="col-sm-4">
<label><input type="checkbox" value="{{label.Id}}">{{ label.Name }} </label>
</div>
</div>
Ответы
Ответ 1
Я думаю, что это должно работать (не проверено)
<div class="checkbox" *ngFor="let label of labelList">
<div class="col-sm-4">
<label>
<input type="checkbox" value="{{label.Id}}" (change)="checkboxes[$event.target.getAttribute('value')]=$event.target.checked">
{{ label.Name }}</label>
</div>
</div>
и сохраните значения измененных флажков в checkboxes
в вашем компоненте.
Ответ 2
Я использую это для флажков:
ng2-material checkbox
И вы можете сделать это в своем компоненте:
<md-checkbox [checked]="exists(label.Id)" (click)="toggle(label.Id)"></md-checkbox>
selected = [];
@Output() selectedChange:EventEmitter<any> = new EventEmitter();
toggle(id) {
var index = this.selected.indexOf(id);
if (index === -1) this.selected.push(id);
else this.selected.splice(index, 1);
this.selectedChange.emit(this.selected);
}
exists(id) {
return this.selected.indexOf(id) > -1;
}
Ответ 3
Вы должны указать атрибут name
для флажка, чтобы отслеживать его на сервере.
Ответ 4
Ввод
<input type="checkbox" (change)="selectionChange($event.srcElement, dataItem)">
Изменить событие
selectionChange(input: HTMLInputElement) {
input.checked === true
? doSomethingIfTrue()
: doSomethingIfFalse();
}
Ответ 5
enter code here
submitForm(form:NgForm){
console.log(form.value);
}
<div class="checkbox" *ngFor="#label of labelList">
<div class="col-sm-4">
<label><input type="checkbox" name='label{{label.Id}}' value="{{label.Id}}">{{ label.Name }} </label>
</div>
</div>
Ответ 6
Я думаю, что вы хотите знать флажок, который был установлен или нет, который вы можете легко получить в виде логического значения, указав атрибут ng-model для атрибута входного тега.
<md-checkbox ng-model="ctrl.someBooleanValue"></md-checkbox>
для дополнительной информации angular материал md-checkbox и angular материал md-checkbox demo