web-dev-qa-db-ja.com

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();
    }
}
javascripthtmlangulartypescript
6
Lupo Wolfman Solitario

そのために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の例

18
yurzui

これはなしを使用して行うことができます[（（ngModel）]も使用します！

コンポーネント「ListSizeComponent」でブール変数「isSelected」を宣言してfalseに初期化するだけです。そして、すべてのチェックボックスに[Checked] = "isSelected"プロパティを追加します。そして、以下の「すべて」チェックボックスの変更イベントを追加します。 （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();
}
9
Amey P Naik

HTMLファイル：

すべてのチェックボックスを選択します。

<div class="col-sm-6">
<input type="checkbox" (change)="isSelected = !isSelected"> Select all
</div>

選択するチェックボックスのリスト：

<div class="col-sm-6" *ngFor="let feature of features">
 <input type="checkbox" [checked]="isSelected"> {{feature.text}}
</div>
6
Syed Muhammad Abid

すべて選択チェックボックスを実行するためのサンプルコード。

<li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
          </li>
          <li *ngFor="let n of names"> 
          <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">
          {{n.name}}
     </li>

.....

selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

詳細

0
Prashobh

選択したアイテムのngModelまたは外部追跡を使用しない、よりモダンなアプローチを次に示します。純粋なMatSelectionListアプローチ：

public toggle(list: MatSelectionList) {
    if (this.isAllChecked(list)) {
        list.deselectAll();
    } else {
        list.selectAll();
    }
}

public isAllChecked(list: MatSelectionList): boolean {
    // Make sure list exists
    if (!list.options)
        return false;
    return list.options.toArray().every(o => o.selected);
}
0
ZBAGI

正解は非常に簡単です（基本的にはサイード・ムハンマド・アビッドの答えを繰り返します）。

TS：

multiSelect: boolean = true;

HTML：

<table>
    <tr>
        <th><input type="checkbox" [checked]="multiSelect" (change)="multiSelect = !multiSelect"/></th>
        <th>Value</th>
   </tr>
   <tr *ngFor="let item of items">
       <td><input type="checkbox" [checked]="multiSelect" /></td>
       <td>{{item.value}}</td>
   </tr>
</table>
0
schlock