所以我正在开发一个 Angular2 应用程序。我有一个表，其中每条记录代表一个学生并包含一个复选框
<input class="mycheckbox" type="checkbox" [value]='student.StudentId'>
在某些时候，用户将单击需要获取所有选定复选框的值的按钮。
我不确定我应该向谁提出这个问题。
一个想法是每个学生都会有一个检查或不检查的值。这必须通过双向绑定来完成。
然而，这意味着每次你必须通过所有学生
这是最好的选择吗？是否有与以下 JQuery 匹配的内容：
$('.mycheckbox:checked').each(function(){
我最近回答了一个类似的问题：https ://stackoverflow.com/a/34142740/215945
您可以在模板中执行以下操作：
<input class="mycheckbox" type="checkbox" [(ngModel)]="student.selected">{{student.StudendId}}
然后，对选定的学生做一些事情：
this.students.filter(_ => _.selected).forEach(_ => { ... })
另一种方法是这样的：
.html
<button value="all" (click)="bulk('all')">ALL</button>
<button value="none" (click)="bulk('none')">NONE</button>
<div *ngFor="#students of student_list #i=index">
<input type="checkbox" value={{students.id}} class="checkedStudent"
(change)="checkedStudents(students.id)" id={{students.id}}>
</div>
在 .ts 文件中
abc:Array<any>= [];
checkedStudents(value) {
console.log(value);
if ((<HTMLInputElement>document.getElementById(value)).checked === true) {
this.abc.push(value);
}
else if ((<HTMLInputElement>document.getElementById(value)).checked === false) {
let indexx = this.abc.indexOf(value);
this.abc.splice(indexx,1)
}
console.log(this.abc)
}
// for Bulk actions
bulk(a) {
// console.log(a);
if (a == "all") {
console.log("yes all");
this.abc = [];
for (let i = 0; i < this.student_list.length; i++) {
(<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = true;
this.abc.push(this.student_list[i].id);
}
}
if (a == "none") {
for (let i = 0; i < this.student_list.length; i++) {
(<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = false;
}
this.abc = [];
}
console.log(this.abc);
}
只需向按钮添加条件并记住检查复选框字段的“值”，如下所示：
<form
#f="ngForm"
(ngSubmit)="onSubmit(f.value)" >
<div class="form-group">
<h2>Enter Email for Newsletter :</h2> <br/>
<input
#registrationemail="ngForm"
ngControl="registrationemail"
placeholder="Email Address"
required type="email"
class="form-control"
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" />
<div *ngIf="registrationemail.touched && registrationemail.errors" class="alert alert-danger">
<div *ngIf="registrationemail.errors.required" >An Email is required</div>
<div *ngIf="registrationemail.errors.pattern">Email is invalid</div>
</div>
</div>
<div class="form-group">
<input
id="accepttermsconditions"
#accepttermsconditions="ngForm"
ngControl="accepttermsconditions"
type="checkbox"
checked/>
<label for="accepttermsconditions">Accept Terms and Conditions </label>
</div>
<button
[disabled]="!f.valid ||
!accepttermsconditions.value"
class="btn btn-primary"
type="submit">Submit </button>
</form>
<div class="form-group">
<label for="options">Options :</label>
<div *ngFor="let option of xyzlist">
<label>
<input type="checkbox"
name="options"
value="{{option.Id}}"
(change)="onClicked(option, $event)"/>
{{option.Id}}-- {{option.checked}}
</label>
</div>
<button type="submit">Submit</button>
</div> ** XYZ.Component.ts**。2.创建一个列表——xyzlist。3. 赋值，我在这个列表中传递来自 Java 的值。4. 值是 Int-Id，经过布尔检查（可以在 Component.ts 中传递）。5. 现在在 Componenet.ts 中获取价值。
onClicked(option, event) {
console.log("event " + this.xyzlist.length);
console.log("event checked" + event.target.checked);
console.log("event checked" + event.target.value);
for (var i = 0; i < this.xyzlist.length; i++) {
console.log("test --- " + this.xyzlist[i].Id;
if (this.xyzlist[i].Id == event.target.value) {
this.xyzlist[i].checked = event.target.checked;
}
console.log("after update of checkbox" + this.xyzlist[i].checked);
}
您也可以使用“formbuilder”以与我的 prev 类似的方式进行操作。发帖如下：
import {Component, OnInit} from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common';
@Component({
selector: 'registration-form',
directives: [FORM_DIRECTIVES],
template: `
<form
[ngFormModel]="myForm"
(ngSubmit)="onSubmit(myForm.value)"
class="ui form">
<div class="form-group">
<label for="registrationemailInput">EMail Address</label>
<input type="email"
required
id="registrationemailInput"
placeholder="email address"
[ngFormControl]="myForm.controls['registrationemail']"
class="form-control"
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
/>
<div *ngIf="myForm.controls['registrationemail'].touched && myForm.controls['registrationemail'].errors" class="alert alert-danger">
<div *ngIf="myForm.controls['registrationemail'].errors.required" >An Email is required</div>
<div *ngIf="myForm.controls['registrationemail'].errors.pattern">Email is invalid</div>
</div>
</div>
<div class="form-group">
<label for="termsandconditions">Accept Terms & Conditions</label>
<input id="termsandconditions"
type="checkbox"
checked
[ngFormControl]="myForm.controls['accepttermsconditions']"
id="accepttermsconditions"
/>
</div>
<button
[disabled]="!myForm.valid || !myForm.controls['accepttermsconditions'].value"
class="btn btn-primary"
type="submit">Submit</button>
</form>`
})
export class FormbuilderComponent implements OnInit {
myForm: ControlGroup;
constructor(fb: FormBuilder) {
this.myForm = fb.group({
'registrationemail': ['test'],
'accepttermsconditions': [true]
})
}
ngOnInit() {
}
onSubmit(form: any): void {
console.log('you submitted value:', form);
}
}
PrimeNG DataTable 将此作为内置功能。只需将 selectionMode 设置为 multiple 即可获得基于复选框的选择。现场演示位于http://www.primefaces.org/primeng/#/datatableselection