当我在我的情况下检查联系人时如何选择所有复选框?!!离子2

时间:2018-05-29 08:43:27

标签: javascript html angular ionic2

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

  checkIfAllSelected() {
    for(var i = 0; i < this.groupedContacts.length; i++){
      this.groupedContacts[i].every(function(item:any){
        let toast = this.toastCtrl.create({
          message: item.selected == true,
          duration: 3000,
          position: 'bottom'
        });
        return  item.selected == true;
      })
    }
  }

  
  synchroContactSelected() {
<ion-checkbox [(ngModel)]="selectedAll" (ionChange)="selectAll()" >contacts</ion-checkbox>
      <ion-item-group *ngFor="let group of groupedContacts">

        <!-- alphabet
              <ion-item-divider id="scroll-letter-{{group.letter}}" light>{{group.letter}}</ion-item-divider>
            -->
        <ion-item *ngFor="let cont of group.contacts;" text-wrap>
          <ion-label> {{cont.prenom_user}} {{cont.nom_user}}
            <p *ngIf="cont.mobile_perso != ''"> {{cont.mobile_perso | phone }}
              <br *ngIf="cont.email_perso != ''" /> {{cont.email_perso}}
            </p>
            <p *ngIf="cont.mobile_pro != '' && cont.mobile_perso == '' "> {{cont.mobile_pro | phone }}
              <br *ngIf="cont.email_pro != ''" /> {{cont.email_pro}}
            </p>
            <p *ngIf="cont.tel_domicile != '' && cont.mobile_pro == '' && cont.mobile_perso == '' "> {{cont.tel_domicile | phone }} </p>
            <p *ngIf="cont.tel_pro != '' && cont.tel_domicile == '' && cont.mobile_pro == '' && cont.mobile_perso == '' "> {{cont.tel_pro | phone }} </p>
          </ion-label> 
          
          <ion-checkbox [(ngModel)]="cont.selected" (ionChange)="synchronizeContact(cont, $event)" (ionChange)="checkIfAllSelected()"  ></ion-checkbox>
        </ion-item>

      </ion-item-group>

    </ion-col>

我试图通过使用selectAll和checkIfAllSelected()选择所有复选框但它不起作用 在我的.TS中我刚刚分组了具有一组组的联系人。 你有什么想法来解决我的问题吗?谢谢

2 个答案:

答案 0 :(得分:0)

有人已经询问了一些与你问过的内容有关的内容click here

以下代码来自右边给出的答案之一:

<强> HTML:

<label><input type="checkbox" name="sample" class="selectall"/> Select all</label>

<div id="checkboxlist">
   <label><input type="checkbox" name="sample[]"/>checkbox1</label><br />
   <label><input type="checkbox" name="sample[]"/>checkbox2</label><br />
   <label><input type="checkbox" name="sample[]"/>checkbox3</label><br />
   <label><input type="checkbox" name="sample[]"/>checkbox4</label><br />
</div>

<强> JavaScript的:

$('.selectall').click(function() {
if ($(this).is(':checked')) {
    $('div input').attr('checked', true);
} else {
    $('div input').attr('checked', false);
}
});

希望它有所帮助!

答案 1 :(得分:0)

我认为一个解决方案可能就是这样:

您正在循环:*ngFor="let cont of group.contacts;"联系人,您可以在*ngFor="let cont of group.contacts;let i = index"中进行修改。 然后在你的.ts中创建一个布尔数组(group.contacts.length)。这个数组是检查你的复选框的数组,然后在这里:

<ion-checkbox [(ngModel)]="cont.selected" (ionChange)="synchronizeContact(cont, $event)" (ionChange)="checkIfAllSelected()"  ></ion-checkbox>

添加选中的

  <ion-checkbox [(ngModel)]="cont.selected" (ionChange)="synchronizeContact(cont, $event);checkIfAllSelected()" [checked]="myBoolArr[i]" ></ion-checkbox>

因此,当这个函数调用checkIfAllSelected()时,你可以将数组全部化为真,结果将是所有复选框都被选中。

然后你可以改变数组值。

我希望这可以帮到你,但它需要这个数组。也可以为我的英语