Question

Vì vậy, tôi đang làm việc trên ứng dụng Angular2. Tôi có một bảng mà mỗi bản ghi đại diện cho một sinh viên và bao gồm một hộp kiểm

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

Tại một số người sử dụng điểm sẽ nhấp chuột vào một nút mà cần phải nhận được giá trị của tất cả các hộp kiểm chọn.

Tôi không chắc mình nên giải quyết vấn đề này ở đâu.

Một ý tưởng là mỗi học sinh sẽ có giá trị được kiểm tra hay không. Và điều này phải được thực hiện thông qua các ràng buộc hai chiều.

Tuy nhiên điều này sẽ ngụ ý rằng mỗi lần bạn phải trải qua tất cả các sinh viên

Đây có phải là lựa chọn tốt nhất có sẵn không? Và có cái gì đó phù hợp với JQuery sau:

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

Answer 1

Gần đây tôi đã trả lời một câu hỏi tương tự: https://stackoverflow.com/a/34142740/215945

Bạn có thể làm như sau trong mẫu của bạn:

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

Sau đó, để làm điều gì đó với các sinh viên đã chọn:

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

Answer 2

Một cách khác để làm như vậy là như thế này:

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

trong .ts nộp

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

Chỉ cần thêm một điều kiện để các nút và ghi nhớ để kiểm tra 'giá trị' của trường hộp kiểm như sau:

<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

Bạn cũng có thể làm điều đó bằng cách sử dụng 'trình tạo hình' theo cách tương tự như trước đây. đăng như sau:

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 có tính năng tích hợp này. Đơn giản chỉ cần đặt selectionMode thành nhiều để có được lựa chọn dựa trên hộp kiểm. Bản trình diễn trực tiếp là http://www.primefaces.org/primeng/#/datatableselection

Answer 6

1. Tôi vừa đơn giản hóa chút ít cho những người đang sử dụng danh sách đối tượng giá trị . 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. tạo danh sách - xyzlist. 3. gán giá trị, tôi chuyển các giá trị từ Java trong danh sách này. 4. Giá trị là Int-Id, boolean -checked (Có thể Pass trong Component.ts). 5. Bây giờ để có được giá trị trong 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); 

}