Question

Quindi sto lavorando ad un'applicazione Angular2. Ho una tabella in cui ogni record rappresentano uno studente e include una casella di controllo

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

Ad un certo punto utente si clicca su un pulsante che ha bisogno di ottenere il valore di tutte le caselle di controllo selezionate.

Non sono sicuro di chi dovrei occuparmi di questo.

Un'idea è che ogni studente avrà un valore di controllato o meno. E questo deve essere fatto attraverso legami a due vie.

Tuttavia Questo implicherà che ogni volta u deve passare attraverso tutti gli studenti

E 'questa la migliore opzione disponibile? E c'è qualcosa che corrisponde al seguente JQuery:

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

Answer 1

Recentemente ho risposto a una domanda simile: https://stackoverflow.com/a/34142740/215945

Si potrebbe fare la seguente nel modello:

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

Poi, per fare qualcosa con gli studenti selezionati:

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

Answer 2

Un altro modo per fare la stessa cosa è come questo:

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

in Ts il file

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

Basta aggiungere un condizionale per il pulsante e ricordatevi di controllare il 'valore' del campo checkbox come segue:

<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

Si può anche farlo usando 'formbuilder' in modo simialr al mio anteprima. inserisci come segue:

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 ha questa funzione incorporata. Basta impostare selectionMode su multiple per ottenere la selezione basata sulla casella di controllo. Demo online è a http://www.primefaces.org/primeng/#/datatableselection

Answer 6

1. ho appena semplificato po 'per coloro la cui stanno utilizzando l'elenco dei Valore oggetto. 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. creare un elenco - xyzlist. 3. assegnare valori, sto passando valori da Java in questo elenco. 4. I valori sono Int-Id, boolean -checked (può passare in Component.ts). 5. Ora per ottenere valore in 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); 

}