Ionic list: swipe to remove?

Is there any possibility to implement “swipe-to-remove” (like in Android task-screen) functionality with “ion-list”?

I have found “can-swipe” directive that allows to add some buttons which appear under partly-swiped item, but that’s not what I’m looking for. I need to fully swipe an item (both sides) and remove it when it becomes swiped to the end of the screen.

1 Like

No one for helps ? :confused: please up !

You probably want the on-swipe-left directive, etc. To use a simple inbox as an example:

<ul class="list">
    <li class="item" ng-repeat="message in messages" on-swipe-left="dismiss(message.id)" on-swipe-right="dismiss(message.id)">
        <p>{{message.subject}}</p>
    </li>
</ul>

Then add a $scope.dismiss function to your controller which will remove the item with the specified ID from $scope.messages.

Thanks for your reply, I tried this, it’s work, but there is no animation, the item disapear without moving :confused: .
Any idea?

Yep, you could try an Ionic Slidebox on each .item, where the first slide is the message itself and the second slide is the “background” of the list. Fire dismiss(message.id) on-slide-change.

This would allow you to create a “Gmail inbox” style list as below:

Hi! I am sorry to be late, I tried this stuff as you said but it dosen’t fit to the code :confused:

I’m late in replying to this thread but I found these css animations useful with Ionic.
http://daneden.github.io/animate.css/

Hi @erictj,
Was trying this out and got it working.
Seems good enough but adding collection-repeat on this is giving strange results :smiley:

Better to also use infinite scroll since having > 50 items is resulting in a bad performance.
Might be because I am using it together with ionic-material.

hello @dmastag

Would be kind and share wht you created ? :slight_smile: :slight_smile: )

Thank you buddy!