web-dev-qa-db-ja.com

Angular2選択したすべてのチェックボックスを取得する方法

だから私はAngular2アプリケーションに取り組んでいます。各レコードが学生を表し、チェックボックスが含まれているテーブルがあります

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

ある時点で、ユーザーは選択したすべてのチェックボックスの値を取得する必要があるボタンをクリックします。

誰に対処すればいいのかわかりません。

1つのアイデアは、各学生がチェックされているかどうかの値を持つということです。そして、これは双方向のバインディングを介して実行する必要があります。

ただし、これは、毎回すべての学生を通過する必要があることを意味します

これは利用可能な最良のオプションですか？そして、次のJQueryに一致するものはありますか？

$('.mycheckbox:checked').each(function(){
jquerycheckboxdata-bindingangulartwo-way
6
Abdel-Rahman Shoman

私は最近同様の質問に答えました： https://stackoverflow.com/a/34142740/215945

テンプレートで次のことを行うことができます。

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

次に、選択した生徒と何かをするために：

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

同じことを行う別の方法は次のとおりです。

.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);
    }
2
Pardeep Jain

ボタンに条件を追加し、次のようにチェックボックスフィールドの「値」を確認することを忘れないでください。

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

PrimeNG DataTableには、これが組み込み機能として含まれています。 selectionModeをmultipleに設定するだけで、チェックボックスベースの選択を取得できます。ライブデモは http://www.primefaces.org/primeng/#/datatableselection にあります

0
Cagatay Civici

以前と同じように、「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);
    }
}
0
Bhail
  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、ブール値チェック済み（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);

}
0
Gourav Bhatia