Question

Je travaille donc sur une application Angular2. J'ai une table où chaque enregistrement représente un étudiant et comprend une case à cocher

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

À un utilisateur du point cliquera sur un bouton qui a besoin pour obtenir la valeur de toutes les cases sélectionnées.

Je ne sais pas à qui je devrais répondre.

Une idée est que chaque étudiant aura une valeur de vérifié ou non. Et cela doit être fait grâce à des liaisons bidirectionnelles.

Toutefois, cela implique que chaque fois u doivent passer par tous les étudiants

Est-ce la meilleure option disponible? Et il y a quelque chose qui correspond à la JQuery suivante:

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

Answer 1

J'ai récemment répondu à une question similaire: https://stackoverflow.com/a/34142740/215945

Vous pouvez faire ce qui suit dans votre modèle:

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

Ensuite, faire quelque chose avec les étudiants sélectionnés:

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

Answer 2

Une autre façon de faire la même chose est comme ceci:

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

dans .ts fichier

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

ajoutez simplement conditionnel au bouton et se rappeler de vérifier la « valeur » du champ de case à cocher comme suit:

<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

Vous pouvez aussi le faire en utilisant « formbuilder » de manière simialr à ma précédente. afficher comme suit:

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 a ceci comme une fonctionnalité intégrée. Réglez simplement selectionMode sur multiple pour obtenir une sélection basée sur une case à cocher. Démo en direct est à http://www.primefaces.org/primeng/#/datatableselection

Answer 6

1. Je viens peu simplifiée pour ceux qui utilisent la liste de valeur objet. 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. créer une liste - xyzlist. 3. attribuer des valeurs, je passe des valeurs de Java dans cette liste. 4. Les valeurs sont Int-Id, boolean -checked (Can Pass in Component.ts). 5. Maintenant, pour obtenir de la valeur dans 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); 

}