ng-if is not display data in AngularJS

Question

I have images and videos dynamically but I want to display images or videos at a time. I want to that When i click on images id then it will show images and when i click on video Id then it will show video.

html code:

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

Here i am using ng-if to display images or Video at a time but after using ng-if no data diplay. Please tell what is my mistake. thank you in advance

can you post the structure of an `img` object please? Also check what the condition `img.type == 'video'` and `img.type == 'image'` prints in each case — Haris Bouchlis, Feb 04 '19 at 12:19
Sir, When i click on images id then it will show images and when i click on video then it will show video. I want to just like that — awwalfaeed, Feb 04 '19 at 12:33

score 1 · Answer 1 · answered Feb 04 '19 at 12:17

1

Try to wrap <video>s into <div> containers and apply ng-show instead of ng-if to containers not <video>s:

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

answered Feb 04 '19 at 12:17

Slava Utesinov

13,410
2
19
26

can you explain to me how I will use this – awwalfaeed Feb 04 '19 at 12:31
want to that When i click on images id then it will show images and when i click on video Id then it will show video. – awwalfaeed Feb 04 '19 at 12:35
@MohammadFareed, try to change `ng-if` to `ng-show` to preserve corresponding html(data as you wrote). – Slava Utesinov Feb 04 '19 at 12:39
Sir, only images id display all images but when i click on video id then videos is not display – awwalfaeed Feb 04 '19 at 13:05
@MohammadFareed, specify location of ng-click directive and videos to show and javascript code. – Slava Utesinov Feb 05 '19 at 05:20
when i have put ng-if on videos section then it displays – awwalfaeed Feb 05 '19 at 05:47

score -1 · Answer 2 · answered Feb 04 '19 at 12:16

-1

Check this topic. Look the first answer about trustAsResourceUrl. Perhaps, it will resolve your issue.

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

In HTML - view file:

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

answered Feb 04 '19 at 12:16

ArMikael

77
5

sir, this is for videos issues but want to that When i click on images id then it will show images and when i click on video Id then it will show video. – awwalfaeed Feb 04 '19 at 12:36

ng-if is not display data in AngularJS

2 Answers2