Hi Everyone,
I have run into an interesting issue with the new ion-slides element regarding to prepending to an ng-repeat list. I am slicing into a large list and seeing an indexing problem causing me to skip an element when I swipe back and prepend an item. The index now references the element two away from the item that I originally swiped on. I am compensating by making a synthetic adjustment in the onSlidePrevEnd callback function. The end user can see it change, and the performance leaves something to be desired. There does not seem to be a callback available in swiper to adjust my indexing issue.
HTML:
<ion-slides id="top" options="options" slider="data.slider" >
<ion-slide-page ng-repeat="(key, item) in list.slice(curr.start, curr.end)">
<div class="list card">
<div class="item item-avatar" style="background-color: #8affb1;">
<img src="{{item.photos[0].value}}">
<h2>{{item.name.formatted}}</h2>
<p>{{item.emails[0].value}}</p>
</div>
<ion-scroll>
<div class="item item-body">
<p ng-repeat="number in item.phoneNumbers">
{{number.type}} : {{number.value}}
</p>
</div>
</ion-scroll>
</div>
</ion-slide-page>
</ion-slides>
Javascript:
$scope.options = {
loop: false,
paginationHide: true,
onSlideNextStart: function(swiper){
console.log('next callback ');
if($scope.curr.end < $scope.list.length) {
$scope.curr.end++;
}
},
onSlidePrevStart: function(swiper){
console.log(swiper.clickedIndex);
if($scope.curr.start > 0) {
$scope.curr.start--;
}
},
onSlidePrevEnd: function(swiper){
swiper.slideNext(false,0);
}
};
$scope.curr = {
start: 56,
end: 64
};
Thanks