How to create an html element (iframe) based on ng-model empty or not?

0
votes

I have an iframe which is getting it's src dynamically from an input element's ng-model. Now I am using a function that check if url is empty or not. If empty, set iframe's src "about:blank".

But I have so many iframes in my page, because it creates itself dynamically with ng-repeat. When I want to see page, my browser wants to create about:blank iframe and I can see my chrome's refresh and stop button keeps blinking a while.

To prevent this, I guess I have to check if url is empty, don't create iframe element. If it's right, how can I do this?

Here is my Javascript Code:

vm.getIframeSrc = function (id) {
    if (id == null || id == undefined){
        return "about:blank"
    }
    return 'https://www.youtube.com/embed/' + id + '?rel=0'
}

HTML:

<iframe ng-src="{{globalCtrl.getIframeSrc(uaCtrl.newMainExerciseVideoURL)}}"></iframe>
1
javascripthtmlangularjsiframe
Can you provide some code to show what you're trying to do, as well as any code you've written to try and fix it? – MattD
us ng-if - docs.angularjs.org/api/ng/directive/ngIf – jshawl
@jessh Thank you! It's exactly what I am searching. Please write it as an answer to provide help everybody. Thanks again. – Sam

1 Answers

0
votes

Use ng-if or ng-show and map it to your flag as follows:

<iframe ng-if="id == null || id == undefined" ng-src="about:blank"></iframe>
<iframe ng-if="id != null && id != undefined" ng-src='https://www.youtube.com/embed/' + {{id}} + '?rel=0'></iframe>