2017-07-05 11 views
-1

角度2のすべてのチェックボックスを選択する方法は?

<div class="col-2"> 
 
    <label class="myButton btn btn-default"><input type="checkbox" [checked]="selectAllCheckbox" (click)="selectAll()"> Select All</label> 
 
</div> 
 
<div class="row"> 
 
    <div class="col-2" *ngFor="let user of Users; let idx = index"> 
 
    <label><input [checked]="item._selected" (click)="updatedUserList(user, $event)" type="checkbox"> {{user}}</label> 
 
    </div> 
 
</div>

ユーザー= [ "ユーザー1"、 "users2"、 "users3"]

+0

[質問する](https://stackoverflow.com/help/how-to-ask) – snaplemouton

答えて

2

そのあなたがコードの下に HTML

<ul> 
    <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> 
</ul> 

コンポーネントをcanrefer角度2での回避策

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { 
    title: String; 
    names: any; 
    selectedAll: any; 
    constructor() { 
    this.title = "Select all/Deselect all checkbox - Angular 2"; 
    this.names = [ 
     { name: 'Prashobh', selected: false }, 
     { name: 'Abraham', selected: false }, 
     { name: 'Anil', selected: false }, 
     { name: 'Sam', selected: false }, 
     { name: 'Natasha', selected: false }, 
     { name: 'Marry', selected: false }, 
     { name: 'Zian', selected: false }, 
     { name: 'karan', selected: false }, 
    ] 

    } 
    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; 
     }) 
    } 
} 
関連する問題