Dynamically added Ion-slide (using ng-repeat) pushing next slide below current active slide

ionic-v1
1

Hello there. I am trying implement ionic slide box with dynamic ion slide. I am using ng-repeat (don’t know if collection-repeat should be used here or not) to multiply the <ion-slide> and handling the addition of new slide on on-slide-changed event like below:

var i = 0;
$scope.slideHasChanged = function($index) {
	if($index == $scope.data.news.length - 1) {
		$scope.data.news.push({title:'abc'+(++i)});
		$ionicSlideBoxDelegate.update();
	}
}

Its working fine, but its pushing new slide below the currently focused one and visible, which looks weird. Same example is working here. http://codepen.io/anon/pen/rVvLOy?editors=101 but on my machine its failing. following is the attached image.

Also, when I removed every parent ionic element like <ion-view> and <ion-content> from the view and kept only <ion-slide-box> in entire page, its working fine without pushing new slide below :stuck_out_tongue: any idea ?

UPDATE
I think upload image is not working ! below is my non-working code sample:

<ion-view hide-nav-bar="true">
   <ion-content class="row-center col-center">		
     <ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="false">
	  <ion-slide ng-repeat="news in data.news">
		    <h1>{{news.title}}</h1>
			<img src="http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg" />
	  </ion-slide>
	</ion-slide-box>		
  </ion-content>
</ion-view>

(Please note, slide box is working properly after I remove ion view and content.)

2

Anyone, Please ! any idea ?

3

After few trial and analysis in Chrome, I found on on-slide-change event, in controller, when I am adding new slide dynamically, Ionic failed to apply in-line css to newly added <ion-slide>. Please have look below:

<div class="slider-slides" ng-transclude="" style="width: 1080px;"> 
    <!-- ngRepeat: news in data.newsCards -->
    <ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="0" style="width: 360px; left: 0px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
	<!-- Content ommitted -->
    </ion-slide>
    <!-- end ngRepeat: news in data.newsCards -->
    <ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="1" style="width: 360px; left: -360px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(-360px, 0px) translateZ(0px);">
	<!-- Content ommitted -->
    </ion-slide>
    <!-- end ngRepeat: news in data.newsCards -->
    <ion-slide ng-repeat="news in data.newsCards" class="slider-slide" data-index="2" style="width: 360px; left: -720px; transition-duration: 0ms; -webkit-transition-duration: 0ms; -webkit-transform: translate(0px, 0px) translateZ(0px);">
	<!-- Content ommitted -->
    </ion-slide>
    <!-- end ngRepeat: news in data.newsCards -->
    <ion-slide ng-repeat="news in data.newsCards" class="slider-slide">
	<!-- Content ommitted -->
    </ion-slide>
    <!-- end ngRepeat: news in data.newsCards --> 
</div>

Look at the last <ion-slide> which doesn’t have the in line css. is it a bug or am I doing it in wrong way ?

4

I am facing a same issue, anyone have the soln’?

Many thanks.