ng-if在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>包裹到<div>容器中，然后將ng-show而不是ng-if應用於不是<video>的容器：

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