I have a dynamic collection of images and videos that I want to display one at a time. Specifically, when I click on an image ID, I want it to show the corresponding image, and when I click on a video ID, I want it to show the relevant video.
Below is the HTML code I have implemented:
<div class="container" ng-init="image()">
<div class="row">
<div class="col-md-12" ng-repeat="img in images">
<div class="mySlides" >
<div class="numbertext">{{img.id}}</div>
<img class="size-i" ng-src="{{img.oe_images}}" ng-show="isActive($index)" ng-if="img.type == 'image'" type="image" style="width:100%;">
</div>
<video ng-if="img.type == 'video'" type="video" width="100%" ng-click="video()" id="video" controls="controls" ng-show="isActive($index)">
<source src="./assets/vdo/{{img.oe_images}}" type="video" type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-md-12" >
<a class="prev" ng-click="showPrev()" style="font-size:36px;" >❮</a>
<a class="next" ng-click="showNext()" style="font-size:36px;" >❯</a>
<div class="row paddi" >
<div class="column" ng-repeat="img in images">
<img class="demo cursor border-demo" ng-src="{{img.oe_images}}" ng-if="img.type == 'image'" type="image" ng-show="isActive($index)" style="width:100%; display: block !important;" data="{{img.id}}" ng-click="currentSlide(img.id)" alt="{{img.oe_images}}" type="image">
</div>
<video ng-if="img.type == 'video'" type="video" controls="controls" src="./assets/vdo/{{img.oe_images}}" type="video/mp4" ng-show="isActive($index)" style="width:100%"></video>
</div>
</div>
</div>
</div>
</div>
I utilized ng-if to display either images or videos at a time, but unfortunately, no data is being displayed after implementing this logic. Can someone please point out my mistake? Thank you in advance!