Angular2 Как получить все выбранные флажки

Question

Итак, я работаю над приложением Angular2. У меня есть таблица, где каждая запись представления студента и включает в себя флажок

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

На какой-то момент пользователь нажмет на кнопку, которую необходимо получить значение всех выбранных флажков.

Я не уверен, кому я должен обратиться к этому вопросу.

Одна из идей заключается в том, что каждый студент будет иметь значение проверенного или нет. И это нужно делать с помощью двухсторонних привязок.

Однако это будет означать, что каждый раз, когда у вас пройти через все студенты

Это лучший доступный вариант? И есть то, что соответствует следующим 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

Вы также можете сделать это, используя форму формуляра, аналогичным образом в моем представлении. пост следующим образом:

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 (Can Pass in 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); 

}