web-dev-qa-db-fra.com

Comment sélectionner toutes les cases à cocher dans angular 6?

Mon code TypeScript est donné ci-dessous.

 selectedAll: any;
 selectedAllSecondname: any;

 this.name = [ {name: 'as', value: 'as', selected: false },
                {name: 'bs', value: 'bs', selected: false },
                {name: 'cs', value: 'cs', selected: false } ];
 this.Secondname = [ {name: 'dd', value: 'dd', selected: false },
                {name: 'ee', value: 'ee', selected: false },
                {name: 'ff', value: 'ff', selected: false } ];
 this.Thirdname = [ {name: 'gg', value: 'gg', selected: false },
                {name: 'hh', value: 'hh', selected: false },
                {name: 'ii', value: 'ii', selected: false } ];

  selectAll(){
    for(var i=0; i < this.name.length; i++) {
       for(var j=0; j < this.Secondname.length; j++) {
          this.name[i].selected = this.selectedAll;
          this.Secondname[j].selected = this.selectedAllSecondname;
       }
     }
  }

 checkIfAllSelected(){

    this.selectedAll = this.names.every(function (item: any) {
       this.checkIfAllSecondnameSelected();
       return item.selected == true;
    })
   }

J'ai donc les mêmes fonctions avec des noms différents pour chaque liste que j'ai déclarée.

 My html:

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

 <li><input type="checkbox" [(ngModel)] = "selectedAll" (change) = "selectAllSecondname();">Select All </li>
  <li *ngFor = "let d of Secondname">
      <input type="checkbox" [(ngModel)]="d.selected" (change)="checkIfAllSecondnameSelected()">
     {{ d.name }}
   <li>

Voici donc ce que j'essaie de faire, si je clique sur tout sélectionner, je dois cocher toutes les autres cases de la page. Mais il ne vérifie que les noms et non les deuxièmes noms et troisièmes noms.

Quelqu'un peut-il me dire où je vais mal et comment corriger cela?

htmlangularangular6angular-formsangular-template
3
Priyanka

Changez simplement "this.selectedAllSecondname" dans selectAll () en "this.selectedAll" comme:

 selectAll(){
    for(var i=0; i < this.name.length; i++) {
      this.name[i].selected = this.selectedAll;
    }
    for(var j=0; j < this.Secondname.length; j++) {
      this.Secondname[j].selected = this.selectedAll;
    }
    for(var j=0; j < this.Thirdname.length; j++) {
      this.Thirdname[j].selected = this.selectedAll;
    }
  }
0
Amany Taweel

Veuillez essayer le code ci-dessous pour la méthode selectAll: -

  selectAll() {
    for (var i = 0; i < this.name.length; i++) {
      this.name[i].selected = this.selectedAll;
    }
    for (var i = 0; i < this.Secondname.length; i++) {
      this.Secondname[i].selected = this.selectedAll;
    }
    for (var i = 0; i < this.Thirdname.length; i++) {
      this.Thirdname[i].selected = this.selectedAll;
    }
  }

Vérifiez la solution de travail ici.

0
Ankit Sharma