I have an <ion-list>
with ng-repeat that repeates the <ion-item>
tags. The list has a reorder button, and reordering works perfectly.
<ion-list show-reorder="true">
<ion-item ng-repeat="i in items">
<div>{{i}}</div>
<ion-reorder-button class="ion-navicon" on-reorder="onMove(i, $fromIndex, $toIndex)"></ion-reorder-button>
</ion-item>
</ion-list>
But as soon as I move the <ion-item>
's inner HTML into a separate template and include that with ng-include
, the reorder function does not work anymore.
EDIT 15.09.15:
*“Does not work anymore” means that I can drag items to another position, but after dropping it, the function of “on-reorder” will NOT be executed and the item stays on its old position. *
<script type="text/ng-template" id="template.html">
<div>{{i}}</div>
<ion-reorder-button class="ion-navicon" on-reorder="onMove(i, $fromIndex, $toIndex)"></ion-reorder-button>
</script>
<ion-list show-reorder="true">
<ion-item ng-repeat="i in items">
<ng-include src="'template.html'" />
</ion-item>
</ion-list>
The controller code:
$scope.items = [];
$scope.items.push("Cat");
$scope.items.push("Dog");
$scope.items.push("Horse");
$scope.onMove = function(item, fromIndex, toIndex) {
$scope.items.splice(fromIndex, 1);
$scope.items.splice(toIndex, 0, item);
}
Here’s a codepen to demonstrate this:
Any help appreciated!