Created
March 26, 2015 16:44
-
-
Save kidker/8fc62a2f9049ffedcb33 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 (#4) if you are using version 1.1.5 or greater) | |
1. 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> | |
2. 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. | |
3. 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 | |
4. 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment