【问题标题】:How to check/uncheck all the options in ion-select when checked/unchecked select all option in ionic3选中/取消选中时如何选中/取消选中离子选择中的所有选项选择ionic3中的所有选项
【发布时间】:2018-10-14 17:35:58
【问题描述】:

这是我的代码,一旦选中/取消选中全选离子选项,我想使用它来检查/取消选中我的选择弹出窗口中的所有选项。

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 事件没有被触发。 这是在 ionic-3 中完成的。任何人都帮帮我。提前致谢

【问题讨论】:

    标签: typescript ionic3 angular5


    【解决方案1】:

    只需在选定的itens中插入itens的所有id

    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;
        }
    

    然后在选择处放置 selectAll 值

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

    【讨论】:

    • 当我检查全选选项时,只有全选选项被选中,当我点击弹出窗口中的 cancal 按钮时,所有项目都被选中,除了全选选项。你能帮我解决这个问题吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-05-18
    • 2021-09-19
    • 2013-01-19
    • 2012-03-05
    • 2014-05-06
    • 2019-01-05
    相关资源
    最近更新 更多