How To Delete Multiple Item From Ionic 3.3 List

Ionic Framework ionic-v3
1

hello
How To Delete Multiple ion-item From Ionic 3.3 List Using CheckBox
here’s my code i want to delete multiple student from the list using checkbox

  <ion-col col-10>
    <ion-label>{{student.name}}</ion-label>
  </ion-col>

  <ion-col col-1>
    <button ion-button full color="secondary" (click)="updateStudent(student)">
      <ion-icon name="create"></ion-icon>
    </button>
  </ion-col>
  <ion-col col-1>
    <button ion-button full color="danger" (click)="deleteStudent(student)">
      <ion-icon name="md-close"></ion-icon>
    </button>
  </ion-col>

</ion-row>
2

I must be missing something, but I see no checkboxes.

1 Like
3

[SOLVED] Finally Got The Answer When Click On Multiple Delete Button Open New Navigation Page And Then Give User To Select Items.

<ion-header>

  <ion-navbar color="perpol">
    <ion-title>Application</ion-title>
  </ion-navbar>

</ion-header>



<ion-content padding>

  <ion-grid>
    <ion-row *ngFor="let student of students">
      <ion-col col-12>

        <ion-list no-lines>
          <ion-item-sliding>
            
            <ion-item>
              <ion-label>{{student.name}}</ion-label>
            </ion-item>

            <ion-item-options side="right">
              <button ion-button color="secondary" (click)="updateStudent(student)"> <ion-icon name="create"></ion-icon></button>
              <button ion-button color="danger" (click)="deleteStudent(student)"> <ion-icon name="md-close"> </ion-icon></button>
            </ion-item-options>

          </ion-item-sliding>
        </ion-list>

      </ion-col>
    </ion-row>
  </ion-grid>

  <ion-fab right bottom>
    <button ion-fab color="perpol" (click)="createStudent()">
      <ion-icon name="add"></ion-icon>
     </button>
  </ion-fab>


 <ion-list>
    <ion-item *ngFor="let student of students">
      <ion-label>{{student.name}}</ion-label>
      <ion-checkbox (click)="deleteMultipel(student)" color="danger"></ion-checkbox>
    </ion-item>
  </ion-list>

<button ion-button color="secondary" (click)="logDeleteStudents()">DELETE</button>

</ion-content>

  deleteMultipel(student) {
    let index = this.deleteSelected.indexOf(student);
    if (index !== -1) {
      this.deleteSelected.splice(index, 1);
    }
    else {
      this.deleteSelected.push(student);
    }
  }
  logDeleteStudents() {
    this.deleteSelected.forEach((student) => {
      this.database.deleteDocument(student);
    });
    this.deleteSelected = [];
  }
4

Screen real estate is pretty precious on mobile apps. If you have more than a few students, having them all be listed twice in the same page is going to get ugly. Why is the “delete many at once” feature so important? You have to click on even more buttons to use it than you would to do the equivalent action deleting one at a time.

5

Yes Screen Looks Ugly But I Created This Page Just For Test Logic