Multiple issues with reorder / delete demo on Codepen.

[stefek99]

Docs: http://ionicframework.com/docs/api/directive/ionList/
Pen: http://codepen.io/ionic/pen/JsHjf
Video: https://www.youtube.com/watch?v=DAWCYDnw7Q0 (127 seconds)

Issues:

• reoder
• mangled markup in header
• where are buttons to edit and share
• not passing fromIndex and toIndex to reorder function (that is causing ng-repeat to choke)

My related question on StackOverflow: http://stackoverflow.com/questions/24139967/how-to-pass-multiple-arguments-to-ionic-reorder-directive

---

I know that you are aware: #768 (please have mine +1 on that)

[perrygovier]

Hey @stefek99 great find, thanks!

I've updated the codepen.

• reoder typo
• header markup - what is mangled?
• edit and share buttons are revealed by swiping/dragging an item to the left
• updated reorder method params to be $fromIndex and $toIndex

[stefek99]

Here:

    <ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios7-minus-outline" 
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      </div> <!-- HERE: remove closing div -->
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <button class="button"
          ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
          </button>
      </div>
    </ion-header-bar>

[perrygovier]

Ah, the ionic header, I was looking in the html header. Thanks, fixed

[stefek99]

Still getting:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: object:008
http://errors.angularjs.org/1.2.12/ngRepeat/dupes?p0=item%20in%20items&p1=object%3A008
    at http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:9007:12
    at ngRepeatAction (http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:28317:20)
    at Object.$watchCollectionAction [as fn] (http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:20656:11)
    at Scope.$digest (http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:20759:29)
    at http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:20945:26
    at completeOutstandingRequest (http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:13040:10)
    at http://code.ionicframework.com/1.0.0-beta.6/js/ionic.bundle.js:13347:7 

Just start randomly reordering elements... (not sure what is the most reliable way to reproduce)

[perrygovier]

Ah, right. It happens when dragging between iterations of 1-9, using unique ID's all the way to 50 works. Fixed. Thanks.

[stefek99]

I see that items are now 0...50 but it doesn't fix the issue. (still getting a lot of red in the console)

• Thank you for the answer here: http://stackoverflow.com/a/24147788/775359 (I have a follow up comment)

[perrygovier]

Ah, I see. It wasn't happening for me at first, but once I get one, there's a lot. We'll take a look.

[perrygovier]

This one has me a bit stumped. Even when adding the track by parameter and updating to our current version of ionic, which has an updated version of angular, I get the same error.

http://codepen.io/perrygovier/pen/eHyjl?editors=101

This may be a problem in angular itself. @ajoslin can you confirm?

[ajoslin]

@perrygovier, what should the error be here?

I go into the codepen and reorder some delete some, reorder again, and all looks to be well. I don't see any errors in the console, either.

[perrygovier]

It takes a while to get it to start, but after 10-20 sec of reordering, I can trigger an error in my console, where it complains of duplicate indexes. Once it starts, every reorder will trigger an error. Everything displays properly.

[berlinhudson]

I have the same issue. My current workaround is using this lib for reorder: https://github.com/JimLiu/angular-ui-tree

[perrygovier]

As mentioned by @berlinhudson in ticket #1716, if you show the {{$index}} values in each list item, when the error begins, the index no longer recalculates.

[inceptiveSujit]

angular.element(...).closest is not a function touchHold @ sortable.js:34