基于阵列索引的离子离子载玻片显示器

时间:2017-05-31 12:32:19

标签: angularjs ionic-framework slide ion

在IONIC 1应用程序中,我试图使用

显示带有多张图像幻灯片的模态弹出窗口
<ion-slide-box>
    <ion-slide ng-repeat="post in popUpImages">
      <img ng-src="{{post.url}}"  class="fullscreen-image"/>
    </ion-slide>
  </ion-slide-box>

这工作正常,弹出显示数组索引0的图像首先显示。现在我想在弹出窗口时从索引3的popUpImages数组中显示图像。任何人都可以帮助我。

感谢。

1 个答案:

答案 0 :(得分:1)

在控制器中注入以下指令$ionicSlideBoxDelegate

您还可以使用delegate =&gt;找到幻灯片索引。 $ionicSlideBoxDelegate.currentIndex();

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

然后创建一个传递幻灯片当前幻灯片索引的function

要添加事件以确定幻灯片是否更改,请执行以下操作:

  $scope.showImage = false;

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

在标记中:

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