CODEWITHSUNDEEP
angularjsionic-frameworkslide
mobiledevnewbie
mobiledevnewbie

Reputation: 717

Ionic ion-slide display based on array index

In an IONIC 1 app I am trying to show a modal popup with several image slide using

<ion-slide-box>
    <ion-slide ng-repeat="post in popUpImages">
      <img ng-src="{{post.url}}"  class="fullscreen-image"/>
    </ion-slide>
  </ion-slide-box>

This is working fine and while pop up is showing the image at array index 0 is showing first. Now I want to show image from the popUpImages array at index 3 while the pop up comes. Anyone help me with this.

Upvotes: 1

Views: 874

Answers (1)

Conrad Lotz
Conrad Lotz

Reputation: 8818

In your controller inject the following directive $ionicSlideBoxDelegate

You can also find the slide index using the delegate => $ionicSlideBoxDelegate.currentIndex();

 <ion-slide-box on-slide-changed="slideChanged($index)">

Then create a function that passes the slidebox current slide index.

To add an event to determine if the slides change do the following:

  $scope.showImage = false;

  $scope.slideChanged = function (index) {
    if(index===3) //$ionicSlideBoxDelegate.currentIndex() === 3
    {
       $scope.showImage = true;
       //Show images
    }
  }

In the markup:

<img ng-show="showImage" ng-src="{{post.url}}"  class="fullscreen-image"/> <!--can use ng-if="showImage" as well-->

Upvotes: 1

Related Questions