нг-если не отображать данные в AngularJS

Question

У меня есть изображения и видео динамически, но я хочу отображать изображения или видео одновременно.Я хочу, чтобы Когда я нажимал на id изображений, он отображал изображения, а когда я нажимал Id для видео, он отображал видео.

html-код:

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

Здесь я использую ng-if для одновременного отображения изображений или видео, но после использования ng-if, если нет воспроизведения данных.Пожалуйста, расскажите, в чем моя ошибка.заранее спасибо

Answer 1

Попробуйте обернуть <video> s в <div> контейнеры и применить ng-show вместо ng-if к контейнерам, не <video> s:

<div ng-show='condition1'>
     <video id='video1'/>
</div>
<div ng-show='condition2'>
     <video id='video2'/>
</div>

Answer 2

Отметьте в этой теме .Посмотрите первый ответ о trustAsResourceUrl .Возможно, это решит вашу проблему.

app.filter("trustUrl", ['$sce', function ($sce) {
    return function (recordingUrl) {
        return $sce.trustAsResourceUrl(recordingUrl);
    };
}]);

В HTML - просмотр файла:

<video src="{{ Your_URL | trustUrl }}" videoplayer controls></video>