CODEWITHSUNDEEP
javascriptangulartypescriptionic2
userlkjsflkdsvm
userlkjsflkdsvm

Reputation: 973

Remove selected checked items from list - Angular 2+/ Ionic 2

I have a checkbox list. When the user selects save, the checked items will be removed and placed in the saved tab which I have included as well. I have managed to get the functionality down for removing an item, just not sure how to check if it's checked then remove said item. Thanks

HTML 

<ion-content class="checks">

    <div [ngSwitch]="messages">

    <ion-list active *ngSwitchCase="'received'">
      <ion-item>
        <ion-label>Select All</ion-label>
        <ion-checkbox (click)="checkAll()" [(ngModel)]="selectedAll" ></ion-checkbox>
      </ion-item>


    <ion-item *ngFor="let rmessage of rmessages; index as i">
        <ion-label>{{rmessage.text}}</ion-label>
        <ion-checkbox [checked]="selectedAll" [(ngModel)]="singleChecked.checked" ></ion-checkbox>
    </ion-item>

        <button ion-button full (click)="save($index)" >Save</button>
    </ion-list>
  <ion-list radio-group *ngSwitchCase="'sent'">
    <ion-list-header>Saved Messages</ion-list-header>
        <ion-item>
        <p>Saved message here</p>
        </ion-item>
  </ion-list>
</div>
</ion-content>

TypeScript 

import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

import { NavController, PopoverController, ViewController, ToastController } from 'ionic-angular';


@Component({
  selector: 'page-messages',
  templateUrl: 'messages.html'
})
export class MessagesPage {
selectedAll: boolean = false;
messages: string = 'messages';
findIndex: any;
singleChecked: boolean = false;
rmessages: any[] = [
    { text: 'This is a test message.' },
    { text: 'This is a second test message.' },
    { text: 'This is a third test message.' }
  ]

  constructor(public navCtrl: NavController, public popoverCtrl: PopoverController, private toastCtrl: ToastController) { 
    this.messages = 'received';
  }

 ionViewDidLoad() {
}

checkAll(){
  console.log(this.messages.length)
  if(this.selectedAll){
    this.selectedAll = true

  }
  else {
    this.selectedAll = false
  }

}

save(index){

    this.rmessages.splice(
          this.rmessages.indexOf(index), 1)

}

}

Upvotes: 2

Views: 1651

Answers (1)

Krishnanunni Jeevan
Krishnanunni Jeevan

Reputation: 1759

There are couple of modifications required :- Your rMessages model needs to be more intelligent

rmessages: any[] = [
    { text: 'This is a test message.' , selected:false},
    { text: 'This is a second test message.', selected:false },
    { text: 'This is a third test message.', selected:false }   ]

Then inside your ngFor

<ion-checkbox [(ngModel)]="rmessage.selected"  ></ion-checkbox>
    </ion-item>

In the selectall use loop through rmessages using foreach or something and set selected to true or false

In Save

use rmessages.filter and get selected items and save it in saved tab

rmessages.filter(function (x) { return x.selected;}).map(function(y){ return y.text;});

then set rmessages to rmessages.filter of unselected items

 rmessages =  rmessages.filter(function (x) { return !x.selected;}

Upvotes: 1

Related Questions