if else statement in AngularJS templates

Question

I want to do a condition in an AngularJS template. I fetch a video list from the Youtube API. Some of the videos are in 16:9 ratio and some are in 4:3 ratio.

I want to make a condition like this:

if video.yt$aspectRatio equals widescreen then 

element's attr height="270px" 

else 

element's attr height="360px"

I'm iterating the videos using ng-repeat. Have no idea what should I do for this condition:

• Add a function in the scope?

• Do it in the template?

Answer 1

There is no if/else functionality in Angularjs versions below 1.1.5. But in the versions above 1.1.5, you can use the ng-if directive. So the ng-if directives remove the element if the expression provided returns false and re-inserts the element in the DOM if the expression returns true. Can be used as follows.

<div ng-if="video == video.large">

<!-- code to render a large video block→

</div>

<div ng-if="video != video.large">

<!-- code to render the regular video block →

</div>