Ion-option-button in list, toggle by icon click instead of swipe?

Thanks a lot @flavordaaave

Thanks @flavordaaave! Much appreciated. :smile:

The on-click swiping works great, but it gives me an angular error of:

Error: [$compile:ctreq] Controller 'clickForOptionsWrapper', required by directive 'clickForOptions', can't be found!

Though it works as it should! Have you encountered it before?

You can put the icon so they know there is more, and let the user tap anywhere. :wink:

Awesome…it made my day…i was really wanted this functionality…thanks guys…:slight_smile:

Thanks @flavordaaave this is awesome!

Ohhh thanks @flavordaaave See my example with hold gesture :smile: =>

Hey guys, I needed a way to delete input list items so I mashed a few Codepens together to make this one.

Also I don’t know how to embed a Codepen in the forum. :smile:

Hey guys,
Any chance there’s a way to toggle the swipe only when clicking on the avatar image?
I’d like to have the area right of the image do something else…
See example -

See the Pen Click to show option buttons with parentController by Asaf Novak (@SafiX) on CodePen.

Any chance there’s a way to have an image to the left of the text which enables the option buttons? -
I tried adding the directive to an image tag with no luck…

You could just attach the tap event to the image instead of the whole item with something like this:

  // Get the avatar image element
  var avatar = element[0].querySelector('.avatar');
  // Change the open attribute on tap
  avatar.addEventListener('tap', function(e) {
	clicked = true;
	if (attrs.optionButtons == 'show') {
		attrs.$set('optionButtons', 'hidden');
	} else {
		attrs.$set('optionButtons', 'show');
  }, false);

Thanks so much for your reply!

I was playing with this all day and couldn’t get it to work. Managed to attach a tap event on the image though.

Can I get your help on this? -

Also, it looks like this way, it will trigger both the “Just been clicked” alert and “Test” alert from the ng-click on the ion-item.

Is there a way to disable the ng-click on the img?

Many thanks

Use event.stopPropagation() to prevent the click event to be passed further trough:


For anyone out there, here’s the end result -

Many thanks!!

1 Like

May I suggest sir ?
can you change the left button into checkbox… and also can be show and hide ? :smile:
best luck :smiley:

Hi, I already set the can-swipe =“false”, it works fine until I implement ion-delete-button with show-delete and reorder button. When the button event is trigger, the swiping is auto enable again and I cannot disable it after that.
Do you have any solution? Thank you.

have a way to combine the ion-option-button with radio list?

I am using swipe and click in combination so my question is how to close all potential opened items on swipe also?

Thank you in advance.

I figure it out, I used the same logic like you did for clicking. Now the new problem is that, you can swipe again after the item is already swiped so my buttons hide after second swipe, and after third show again, and so on… Have any idea how to fix it?.

How to prevent swiping if item is already swiped? This is bug or am I crazy? :slight_smile: