2015-03-18

AngularJS中的If..Else语句

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>

1. 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.

1. 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

1. 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>

参考资料

1. http://stackoverflow.com/questions/15810278/if-else-statement-in-angularjs-templates

Javascript

angular