Delete + Edit like Apple clock app

Hey guys,

in my app the user can create items. But I just want to have two buttons in my header.

  1. Edit
  2. Add new

On Edit I want to show the delete button, but I also want to show the ion-chevron-right (arrow right) to show the user that he can edit the item.

Just like in the default apple clock app. Any ideas? On edit it should look like:

Does no one has an idea?

So you want something like this:

Click the top left button to show the delete.

I know how to show the delete. But I want to give the user the possibility to EDIT a item. So he can click the item while showDelete is TRUE and edit it on a different page.

Ohhh, understood. Updated:

I added extra right to the chevron icon in the css so you can still see it. I’m sure you can tweak it. Code to get the ng-click taken from @mhartington:

Thaaaank you very much :slight_smile:

1 Like

I discovered a new problem with this wonderful solution. While the animation there is a bug.

My code looks like:

<ion-list show-delete="view.showDelete" class="list list-editing">
    	<ion-item ng-repeat="(control, data) in controldata" href="#/controls/{{control}}" ng-class="{'activate-link': view.showDelete,'item-toggle':!view.showDelete, 'item-icon-right':view.showDelete, 'grey':!}" class="item-icon-left item-button-right">
    		<ion-delete-button ng-click="deleteControl(control)" class="ion-minus-circled"></ion-delete-button>
    		<i class="icon icon-{{data.icon}}"></i>
    		<h2 class="padding">{{data.label}}</h2>
    		<label class="toggle" ng-hide="view.showDelete">
	    		<input type="checkbox" ng-model="" ng-change="toggleControl(control,">
	    		<div class="track">
		    		<div class="handle"></div>
		    <i class="icon ion-chevron-right icon-accessory ng-hide" ng-show="view.showDelete"></i>

And while the animation it looks like:

I uploaded a video on youtube: Broken animation Video

I think the problem is that the toggle and ion-chevron-right are both animated, so for a couple of milliseconds both are shown. But they are both position:absolute, so I have no idea what the actual problem is.

But only on hiding the chevron and showing the toggle!

No ideas guys? :frowning: I have absolutely no idea what the problem is

Could you put your new code in a codepen? It’s easier to help when we can mess with it. :smile:

Oh, sorry brandyshea, sure :smiley:

Here it is: Codepen

On desktop its working fine, I only get this problem on mobile devices, in my case: iPhone 6 and iPad Air.

Change the ng-hide on the toggle to this:


That fixes it for me.

I changed it (see Codepen), but it’s still the same.

I see the problem again. I had to build it as an app in order to see it. I’m looking into it between working on other things. So far no luck finding a solution. The animation seems really slow regardless though.

Thank you brandy for all your help I tried to find a way for stoping the animation of the element that should be hidden, but I couldn’t. I hope you gonna have more luck.

You could add me on skype (username: moritzdrescher) if you need further information/details.

Ok I have it working like this. Does this work for you, or are you able to reproduce the problem again?

See codepen: