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>