首页 文章

如何在选中/取消选中时选中/取消选中离子选择中的所有选项选择ionic3中的所有选项

提问于
浏览 次
2

这是我的代码，一旦选中/取消选中select all ion-option，我想检查/取消选中我选择弹出窗口中的所有选项 .

items:any =[
      {id:1, value:"Apple"}
      {id:2, value:"Banana"}
      {id:3, value:"Stawberry"}
      {id:4, value:"PineApple"}
      {id:5, value:"Grapes"}
      ];
    selectedItems:any;
    selectAll:boolean;
    
    /**
     * This select all the items in the ion-select  popup
     **/
    selectAllItems() {
      if(!selectAll) {
        this.items.filter(Obj => {
          this.selectedItems.push(Obj.id);
        });
        this.selectedItems.push(0);
        this.selectAll = true;
      } else {
        this.selectedItems = this.items[0].id;
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-item>
        <ion-label>Multiselect</ion-label>
        <ion-select [(ngModel)]="selectedItems">
          <ion-option (ionSelect)="selectAllItems()" [value]="0">
            Select All
          </ion-option>
          <ion-option *ngFor="let item of items" [value]="item.id">
            {{item.value}}
          </ion-option>
        </ion-select>
      </ion-item>

当我使用（ionSelect）时，模型会发生变化，但所有选项都没有被检查，当我取消选中时，ionSelect事件没有被触发 . 这是在离子-3中完成的 . 任何人帮助我 . 提前致谢

typescript ionic3 angular5

1 回答

  • 0

    只需在选中的itens中插入所有的it

    constructor(private ngZone: NgZone){
}

selectAllItems() {
    if (!selectAll) {
      this.ngZone.run(() => {
        for (let item of items) {
          this.selectedItems.push(item.id)
          this.selectAll = true;
        }
      })
    } else {
      this.selectedItems = [];
      this.selectAll = false;
    }

    并在select中输入selectAll值

    <ion-option (ionSelect)="selectAllItems()" [value]="selectAll">
            Select All
          </ion-option>
    回复于

相关问题