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

【问题标题】：Ionic ion-slide display based on array index基于阵列索引的离子离子玻片显示
【发布时间】：2019-10-18 00:51:19
【问题描述】：

在 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 数组的图像。任何人都可以帮我解决这个问题。

【问题讨论】：

其他图片呢？第三张图片会先显示，然后再显示？

标签： angularjs ionic-framework slide

【解决方案1】：

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

您还可以使用委托找到幻灯片索引 => $ionicSlideBoxDelegate.currentIndex();

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

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

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

  $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-->

【讨论】：