How to store a reordered list?

Ionic Framework ionic-v3
1

Hi,

I’d like to store reordered list but I don’t know how to do that. I think the solution would be to store each element in an array with in the new index but I don’t know how to write it.

Here’s the html :

<ion-list no-lines>
    <ion-item-group reorder="{{flag}}" (ionItemReorder)="reorderItems($event)">
      <ion-item-sliding *ngFor="let item of items" #SlidingItem>
        <ion-item (tap)="goTo(item)">
          {{item.id}}
          <p>{{item.label}}</p>
          <p>Engagement : {{item.points}}% </p>
        </ion-item>
        <ion-item-options side="left">
          <button ion-button (click)="never(SlidingItem, item)">0%</button>
          <button ion-button (click)="rarely(SlidingItem, item)">25%</button>
          <button ion-button (click)="sometimes(SlidingItem, item)">50%</button>
          <button ion-button (click)="often(SlidingItem, item)">75%</button>
          <button ion-button (click)="always(SlidingItem, item)">100%</button>
        </ion-item-options>
      </ion-item-sliding>
    </ion-item-group>

  </ion-list>

And here’s the reorder function :

reorderItems(indexes) {
  let element = this.items[indexes.from];
  this.items.splice(indexes.from, 1);
  this.items.splice(indexes.to, 0, element);
};
2

This seems like an unwieldy data structure. What are you really trying to do? Allow the user to move items in a list around somehow? If so, I would recommend looking at dragula, which makes this fairly simple.

3

Oops, I copy/paste the wrong html code, I edited the post. I’m going to look at dragula.

4

If you want to stick with Ionic’s version, I would look at using the reorderArray() helper function described here, and then all you have to store is your items array in whatever state it ends up in. If you go with Dragula, the [dragulaModel] binding serves roughly the same purpose.

1 Like
5

Thanks, easier than I thought with the reorderArray() function !