javascript - angular 2 กล่องเลือกเพื่อเลือกทั้งหมด

ปัญหา

ฉันได้หาคำตอบสำหรับปัญหานี้แล้วแต่ยังติดอยู่ ฉันมีตารางที่มีหลายแถว โดยมีช่องทำเครื่องหมายในแต่ละแถว ฉันต้องการช่องทำเครื่องหมายเพื่อเลือกทั้งหมดและยกเลิกการเลือกทั้งหมด นี่คือตัวอย่างโค้ดบางส่วน

แม่แบบ

<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
    <tr>
        <th></th>
        <th>Size</th>
        <th>Diameter</th>
        <th class="text-center">
            <input type="checkbox" name="all" (change)="checkAll($event)"/>
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let size of sizes | async ; let i = index">
        <td class="text-right">{{i + 1}}</td>
        <td class="text-right">{{size.size}}</td>
        <td>{{size.diameter}}</td>
        <td class="text-center">
            <input type="checkbox" name="sizecb[]" value="{{size.id}}"/>
        </td>
    </tr>
</tbody>

ส่วนประกอบ

    export class ListSizeComponent implements OnInit {
    constructor () {
    }

    sizes: any;

    setSizes() {
        this.sizes = [
            {'size': '0', 'diameter': '16000 km'},
            {'size': '1', 'diameter': '32000 km'}
        ]
    }

    checkAll(ev) {
        if (ev.target.checked) {
            console.log("True")
        } else {
            console.log("False");
        }
    }

    ngOnInit(): void {
        this.setSizes();
    }
}

คำตอบ #1

คุณสามารถใช้ ngModel เพื่อทำสิ่งนั้นได้

แม่แบบ:

<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
....
<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>

ส่วนประกอบ:

checkAll(ev) {
  this.sizes.forEach(x => x.state = ev.target.checked)
}

isAllChecked() {
  return this.sizes.every(_ => _.state);
}

ตัวอย่าง Stackblitz

คำตอบ #2

นี่สามารถทำได้ โดยไม่ต้อง ใช้ [(ngModel)] ด้วย !

เพียงประกาศและกำหนดค่าเริ่มต้นตัวแปรบูลีน 'isSelected' ให้เป็น false ในคอมโพเนนต์ 'ListSizeComponent' และเพิ่มคุณสมบัติ [Checked]="isSelected" ให้กับทุกกล่องทำเครื่องหมาย (checkbox) และเพิ่มเหตุการณ์เปลี่ยนแปลง (change) ต่อกล่องทำเครื่องหมาย 'all' ดังนี้ (change)="isSelected=true"

ดังนั้นโค้ดของคุณจึงดูเหมือนด้านล่างนี้,

<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
    <tr>
        <th></th>
        <th>Size</th>
        <th>Diameter</th>
        <th class="text-center">
            <input type="checkbox" name="all" (change)="isSelected = true"/>
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let size of sizes | async ; let i = index">
        <td class="text-right">{{i + 1}}</td>
        <td class="text-right">{{size.size}}</td>
        <td>{{size.diameter}}</td>
        <td class="text-center">
            <input type="checkbox" name="sizecb[]" value="{{size.id}}" 
             [checked]="isSelected"/>
        </td>
    </tr>
</tbody>
</table>

ส่วนประกอบ :

export class ListSizeComponent implements OnInit {
constructor () {
}

sizes: any;
isSelected = false;

setSizes() {
    this.sizes = [
        {'size': '0', 'diameter': '16000 km'},
        {'size': '1', 'diameter': '32000 km'}
    ]
}



ngOnInit(): void {
    this.setSizes();
}