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

22

Thanks a lot @flavordaaave

23

Thanks @flavordaaave! Much appreciated. :smile:

24

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?

25

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

26

Awesomeā€¦it made my dayā€¦i was really wanted this functionalityā€¦thanks guysā€¦:slight_smile:

27

Thanks @flavordaaave this is awesome!

28

Ohhh thanks @flavordaaave See my example with hold gesture :smile: => http://codepen.io/jdnichollsc/pen/YXOqEw

29

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:

30

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.

31

Hi,
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ā€¦

32

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);
33

Hi,
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

34

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

35

Wonderful!

For anyone out there, hereā€™s the end result -

Many thanks!!

1 Like
36

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

37

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.

38

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

39

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.

40

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?.

41

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