Angular2如何獲取所有選中的複選框

Question

因此，我正在開發一個Angular2應用程序。 我有其中每個記錄代表一個學生，包括一個複選框

<input class="mycheckbox" type="checkbox" [value]='student.StudentId'> 

在某些時候，用戶會點擊需要得到所有選定的複選框值按鈕的表。

我不知道應該由誰來解決這個問題。

一個想法是，每個學生將有一個檢查或不檢查的值。這必須通過雙向綁定完成。

然而，這將意味着，每次u必須經過所有學生

這是最好的選擇？ 而且是有什麼符合以下的JQuery：

$('.mycheckbox:checked').each(function(){ 

Answer 1

我最近回答了類似的問題：https://stackoverflow.com/a/34142740/215945

你可以做你的模板如下：

<input class="mycheckbox" type="checkbox" [(ngModel)]="student.selected">{{student.StudendId}} 

然後，做與選定的學生一起：

this.students.filter(_ => _.selected).forEach(_ => { ... }) 

Answer 2

另一種方式做同樣的是這樣的：

的.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); 
    } 

Answer 3

只需添加一個條件到按鈕，記得檢查「價值」的複選框字段如下：

<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> 

Answer 4

您也可以使用'formbuilder'以與我的上一頁相似的方式執行此操作。發佈如下：

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 &amp; 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); 
    } 
} 

Answer 5

PrimeNG DataTable將其作爲內置功能。只需將selectionMode設置爲多個即可獲得基於複選框的選擇。現場演示爲http://www.primefaces.org/primeng/#/datatableselection

Answer 6

1. 我剛纔簡化一點對於那些正在使用 值對象的列表。 XYZ.Comonent.html。

<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，boolean -checked（可以在Component.ts中傳遞）。 5.現在可以通過在intel網站上獲得價值。

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); 

}