bug: Ion-slides error returning to 1st slide with loop

[jgw96]

From @elaval on January 4, 2016 16:14

Type: bug

Platform: all

Problem on ionic 1.2.1 & ion-slides

I have a slide box (ion-slides) with looping & slides generated via ng-repeat. Each slide has an "ion-list" with items that are also generated via ng-repeat.

For example,
Slide1: A,B,C
Slide2: D,E,F
Slide3: G,H,I

  <ion-slides options="{loop:true}">
    <ion-slide-page ng-repeat="page in controller.data">
      <ion-list>
        <ion-item ng-repeat="item in page.items">
          {{item}}
        </ion-item>
      </ion-list>
    </ion-slide-page>
  </ion-slides>

In the controller:
this.data = [
{items:["A","B","C"]},
{items:["D","E","F"]},
{items:["G","H","I"]}
]

When I swipe right on the last side, I go back to the first slide but the list content of the first slide is now distorted:

Slide1: A, A, A, B, B, B, C, C, C

The same happens if I swipe left on the first slide going to the last slide.

Example provided on Code Pen: http://codepen.io/elaval/pen/XXpoLy

Copied from original issue: ionic-team/ionic-framework#4901

[jgw96]

From @PhilHuot on February 3, 2016 20:13

I'm having the same issue. There is a bug when you use ng-repeat in ion-slides if the loop option is set to true. Any help would be appreciated.

Tested on ionic 1.2.4

Just a note: I tested it using the deprecated ion-slide-box and its working fine.

[jgw96]

From @wittayaatt on March 4, 2016 7:2

I have found the workaround. I am not so sure if this part of code is actually about but I noticed they remove ng-repeat of looped slide here. So, I add the code to remove ion-slide-page children's ng-repeat.

var newNodeChild = newNode.find('ion-item');
newNodeChild.removeAttr('ng-repeat');

Full ionic.bundle.js start at line 11006

for (i = 0; i < appendSlides.length; i++) {
  newNode = angular.element(appendSlides[i]).clone().addClass(s.params.slideDuplicateClass);
  newNode.removeAttr('ng-transclude');
  newNode.removeAttr('ng-repeat');

  var newNodeChild = newNode.find('ion-item');
  newNodeChild.removeAttr('ng-repeat');

  scope = angular.element(appendSlides[i]).scope();
  newNode = $compile(newNode)(scope);
  angular.element(s.wrapper).append(newNode);
    //s.wrapper.append($(appendSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));
}
for (i = prependSlides.length - 1; i >= 0; i--) {
    //s.wrapper.prepend($(prependSlides[i].cloneNode(true)).addClass(s.params.slideDuplicateClass));

  newNode = angular.element(prependSlides[i]).clone().addClass(s.params.slideDuplicateClass);
  newNode.removeAttr('ng-transclude');
  newNode.removeAttr('ng-repeat');

  var newNodeChild = newNode.find('ion-item');
  newNodeChild.removeAttr('ng-repeat');

  scope = angular.element(prependSlides[i]).scope();
  newNode = $compile(newNode)(scope);
  angular.element(s.wrapper).prepend(newNode);
}

Hope this help.

[jgw96]

From @Aknilam on March 6, 2016 0:53

+1

I faced similar problem, I modified your Code Pen http://codepen.io/elaval/pen/XXpoLy. Here is delayed change of slides data and auto change of slides.

@wittayaatt unfortunately your code didn't help in this case

[jgw96]

From @ruslan-fidesio on August 10, 2016 17:0

Stumbled upon the same problem, here is an example : https://codepen.io/ruslan-fidesio/pen/qNLqYk using the nightly build.

Does anyone have a workarround ?

[jgw96]

From @TzaddikO on October 12, 2016 14:52

@ruslan-fidesio I don't think that's the same issue..

However this is still broken in 1.3.1

Here is an updated modification of elaval's Code Pen: http://codepen.io/toltman/pen/mAKEOx

[jgw96]

From @rgarciape on January 10, 2017 11:41

Hi @elaval ,

Have you found any workaround?

I´m testing ion-slide component with the option loop set and I suppose my Issue is more or less the same.

The index that I obtain when I load the component is loaded returnning activeIndex = 2, but only running on devices. However, when I launch the app via ionic serve it works fine.

Here are my ionic info:

Cordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-beta.11
Ionic CLI Version: 2.1.18
Ionic App Lib Version: 2.1.7
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7
Node Version: v7.3.0
Xcode version: Not installed

Thanks in advance¡

[twinssbc]

I'm having same issue.
There will be two duplicate slides generated when loop mode is set to true.
In the duplicate slide, somehow the ngRepeat is repeated multiple times.

<div class="list">
            <!-- ngRepeat: item in page.items --><!-- ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding" style="">
              G
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              G
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              G
            </ion-item><!-- end ngRepeat: item in page.items --><!-- end ngRepeat: item in page.items --><!-- ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              H
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              H
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              H
            </ion-item><!-- end ngRepeat: item in page.items --><!-- end ngRepeat: item in page.items --><!-- ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              I
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              I
            </ion-item><!-- end ngRepeat: item in page.items --><ion-item ng-repeat="item in page.items" class="item ng-binding">
              I
            </ion-item><!-- end ngRepeat: item in page.items --><!-- end ngRepeat: item in page.items -->
          </div>

[CodeTectonics]

I had a similar issue and found that using an ng-if to remove the ion-slides element until the data is loaded into the scope worked for me.

[divinzer]

same issue
this works only web not device.

below options is helpful but not perfect
options.loop = false