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

Answer 1

Angularjs (versions below 1.1.5) does not provide the if/else functionality . Following are a few options to consider for what you want to achieve:

(Jump to the update below (#5) if you are using version 1.1.5 or greater)

1. Ternary operator:

As suggested by @Kirk in the comments, the cleanest way of doing this would be to use a ternary operator as follows:

<span>{{isLarge ? 'video.large' : 'video.small'}}</span> 

2. ng-switch directive:

can be used something like the following.

<div ng-switch on="video">     <div ng-switch-when="video.large">         <!-- code to render a large video block-->     </div>     <div ng-switch-default>         <!-- code to render the regular video block -->     </div> </div> 

3. ng-hide / ng-show directives

Alternatively, you might also use ng-show/ng-hide but using this will actually render both a large video and a small video element and then hide the one that meets the ng-hide condition and shows the one that meets ng-show condition. So on each page you'll actually be rendering two different elements.

4. Another option to consider is ng-class directive.

This can be used as follows.

<div ng-class="{large-video: video.large}">     <!-- video block goes here --> </div> 

The above basically will add a large-video css class to the div element if video.large is truthy.

UPDATE: Angular 1.1.5 introduced the ngIf directive

5. ng-if directive:

In the versions above 1.1.5 you can use the ng-if directive. This would 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>