Ion-List example with Add / Delete / Edit / Default items

Hi Friends,
I have created this list example which uses Ionic list with option-buttons and Ionic modal for adding and editing list items. Additonally it features a way of marking list items with a check mark icon. I designed it to present the ‘Default entry’ in a set of items.

I am concerned about the performance when Updating a list item. You can see two items for quite some item when updating the list array. Does anyone see a way of improving the performance or any other way of making the process invisible for the user?

Here is the example:

I’m really looking forward for the Beta release. With a little bit of luck I’ll be able to use Ionic for a re-design of a bigger project soon. I hope the example is valuable.

Regards,
Alex

2 Likes

Nice example. Thanks for posting.

I’m not seeing the delay you are talking about. My steps:

Added 3 items to the list
Dragged the middle item.
Selected Edit.
Changed the Description
Saved

Perhaps you could use Angular’s “track by” for your list. You’ll need to add an id field (or something else) to each item in the list. Track by helps Angular avoid showing multiple list items when the contents are updated.

Thanks for your feedback! Actually the performance issue is more visible when you deploy it on a Phone. On my Galaxy Nexus it takes approximately 1 second until the List shows the updated item properly.

I will try to implement my own “track by” ID as you suggested and see if it changes something. Currently I am using the build in “track by” functionality provided by ‘ngRepeat’.

Do you know about any Event which is triggered when Angular updated the HTML? I may be able to use this to lock the screen until the everything is finished so that the user will not see the process.

Regards,
Alex