Ionic 1 or Ionic 2?


#1

Hi guys

I’ve been reading around a fair bit and it seems there’s a lot of love for Ionic 2 over Ionic 1 (which is still awesome in my opinion).

I have developed the same app in both, but have reached a sticking point with the one in Ionic 2 - No list reordering utility.

Shame, as I’d like to continue with Ionic 2, but I think I’ll have to head back to my Ionic 1 project as I don’t want to sacrifice usability for the sake of using an updated framework.

Would I be right in doing this??


#2

Hello ionicbobs,

You have still option to code it manually, is that not right way to do instead of switching back to earlier version.


#3

Hi umardraz

I’m quite new to Ionic and Angular and coding it manually is a little tricky for me :slight_smile:

Would you be able to point me in the right direction for me to do this? No problem if not, I have my Ionic 1 backup!

Thanks


#4

i will feel more than happy to guide you, do share your part of the code relevant to that area, lets see what i can do for you :slight_smile:


#5

Thank you umardraz.

First of all, I have tried to extract my code from my various Ionic2 files into a CodePen to show you, but I can’t even get the CodePen to work! (this is how rubbish I am): https://codepen.io/anon/pen/gMbbzq

I have created an Ionic1 CodePen, so you can see what I’m trying to achieve. https://codepen.io/anon/pen/wWwmjR

Basic reordering with the added functionality of moving activities between days (i.e. move “clean bike” from Tuesday to Monday). I haven’t managed to get my Ionic 1 project to the stage where you can move activities between days, I’m also stuck on this.

From my Ionic2 various files, my template is:

<div *ngFor="let day of week">

	<ion-item-group>

		<ion-item-divider primary>
			{{day.name}}
		</ion-item-divider>

		<ion-item-sliding *ngFor="let activity of day.activities">

			<a ion-item>
				<ion-icon name="plus" item-right></ion-icon>
				{{activity.name}}
		    </a>

		    <ion-item-options>
		    	<button primary><ion-icon name="clipboard"></ion-icon></button>
		    	<button danger><ion-icon name="remove"></ion-icon></button>
		    </ion-item-options>

	  	</ion-item-sliding>

		<ion-item>
		  	<button outline>
			    Add an activity
			</button>
		</ion-item>

	</ion-item-group>

</div>

#6

Hi,

have you fixed it or still looking for the solution?