List view demo case

I’m trying to set up a demo case of the list view with all it’s interactions. Now it seams that there are still some caveats.

First of all, I use this HTML:

<content scroll="true" has-header="true" has-footer="true">
	<div class="content padding">
		<list
			is-editing="false"
			animation="slide-left-right"
			delete-icon="ion-minus-circled"
			reorder-icon="ion-navicon">
			<item 
				buttons="item.buttons"
				can-delete="true"
				can-reorder="true"
				can-swipe="true"
				ng-repeat="notification in notifications">
	        	<h3>{{notification.title}}</h3>
	        	<p>{{notification.description}}</p>
			</item>
		</list>
	</div>
</content>
  • When enabling editing of the list in Chrome, the drag item is displayed 80% out of the container of the item. Dragging is possible when I grab the visual part of the icon.
  • When not enabled I’m not able to use the swipe action to display the icons, both in Chrome (emulating touch events) and using an emulator for iOS.

Is it possible to provide a working demo so I can compare my code to see what could be wrong?
I’m really diving into Ionic since I think it’s a great initiative and it would be great if I could create a working demo app to showcase what Ionic can do.

Also:

How can a method be bind to dragStart, onDrag, dragEnd and how to fetch the new order of the items?
In the console I see that some data is being logged, but not sure what it exactly is.

1 Like

Hey @MrJean. I did recently close an issue related to the reordering, there is a callback that happens that you can listen for:

<list on-reorder="onReorder(el, start, end)">

Then in your controller:

$scope.onReorder = function(el, start, end) {
  ionic.Utils.arrayMove($scope.items, start, end);
} 

We need to fix the drag handle issue, I will file an issue for that. Thanks!

1 Like