javascript - Make a render condition with AngularJS

Question

I know how to make a view condition in AngularJS, that will display or hide dom element dependent on the condition:

<div ng-show="{{isTrue}}">Some content</div>

but how do I create a render condition that determines whether to render or not the div?

Answer 1

Update for angularjs 1.1.5 and above users (not supported in 1.0.7):

Related commit: https://github.com/angular/angular.js/commit/2f96fbd17577685bc013a4f7ced06664af253944

Angular now have a conditional rendering directive: ngIf.

Usage:

<div ng-if="conditional_expression"></div>

Note that when an element is removed using ngIf its scope is destroyed and a new scope is created when the element is restored

Documentation: directive-ngIf

For legacy angularjs users:

ngShow directive conditionally hides/shows the element. This is going to be changed in one of the new stable releases, it is now available in the unstable release as with 1.1.5.

If you want to conditionally add/remove items on DOM, use can use ngSwitch.

<div ng-switch="showMe">
    <div ng-switch-when="true">Hello!</div>
</div>

Actually, this directive has been created for handling cases for more than 1, but you can use it that way too. See this answer for examples of more sophisticated usages.