Ionic reorder not working properly


#1

I am trying to make a reorderable list.
The HTML code looks like this:

<ion-list ng-repeat="timeline in timelines"  show-reorder="showReorder">
   <ion-item class="item"  ng-click="showReorder || toEditTimeline(timeline)" >
          <!--- A lot of unrelated markup of the item here, trust me it's unrelated --->
        <ion-reorder-button class="ion-navicon"
              on-reorder="moveItem(timeline, $fromIndex, $toIndex)">
    	</ion-reorder-button>
</ion-item>
<div id="total">
     <!--- Markup of the total div -->
</div>

The intention: I am trying to make something like this:

The timeline divs are white, and the total divs are blue. It displays the total of connected timelines
For the timeline totals to be displayed i need to check inside the ng-repeat if i should display the total div or not.

Thus far, i’ve done this using a construction similar to this:

<div ng-repeat="timeline in timelines">
      <Timeline div>
      </Timeline div>

      <Total div ng-show="<All sorts of conditions here, unrelated>">
      </Total div>
</div>

This worked fine, until i tried to add reorder to this construction.

The problem:

  • When I put the ng-repeat on the ion-list it shows the View correctly, but when i try to reorder the fromIndex and toIndex are 0?
  • When I put the ng-repeat on the item, like it is shown on the ionic docs on reorder, The fromIndex and toIndex are correct, and reorder works fine, but there are no total divs shown at all

What I want:
I want to be able to show totals after each Item div and still be able to reorder!

I realise that “What I want” might sound a little spoiled, but it’s just to make sure I am being clear and provide as much usefull info as I can.

Thanks in advance!


#2

I solved it by doing this!

<div >
  <Timeline ng-repeat-start="timeline in timelines">
  </Timeline >

  <Total ng-repeat-end ng-show="<All sorts of conditions here, unrelated>">
  </Total >

Notice the ng-repeat-start and ng-repeat-end