Podcast/lib/angular/docs/partials/api/ng.directive:ngIf.html

<a href="http://github.com/angular/angular.js/tree/v1.2.0rc1/src/ng/directive/ngIf.js#L3" class="view-source btn btn-action"><i class="icon-zoom-in"> </i> View source</a><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/ngIf.js" class="improve-docs btn btn-primary"><i class="icon-edit"> </i> Improve this doc</a><h1><code ng:non-bindable="">ngIf</code>
<div><span class="hint">directive in module <code ng:non-bindable="">ng</code>
</span>
</div>
</h1>
<div><h2 id="Description">Description</h2>
<div class="description"><div class="ng-directive-page ng-directive-ngif-page"><p>The <code>ngIf</code> directive removes and recreates a portion of the DOM tree (HTML)
conditionally based on <strong>&quot;falsy&quot;</strong> and <strong>&quot;truthy&quot;</strong> values, respectively, evaluated within
an {expression}. In other words, if the expression assigned to <strong>ngIf evaluates to a false
value</strong> then <strong>the element is removed from the DOM</strong> and <strong>if true</strong> then <strong>a clone of the
element is reinserted into the DOM</strong>.</p>
<p><code>ngIf</code> differs from <code>ngShow</code> and <code>ngHide</code> in that <code>ngIf</code> completely removes and recreates the
element in the DOM rather than changing its visibility via the <code>display</code> css property.  A common
case when this difference is significant is when using css selectors that rely on an element&#39;s
position within the DOM (HTML), such as the <code>:first-child</code> or <code>:last-child</code> pseudo-classes.</p>
<p>Note that <strong>when an element is removed using ngIf its scope is destroyed</strong> and <strong>a new scope
is created when the element is restored</strong>.  The scope created within <code>ngIf</code> inherits from 
its parent scope using
<a href="https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance">prototypal inheritance</a>.
An important implication of this is if <code>ngModel</code> is used within <code>ngIf</code> to bind to
a javascript primitive defined in the parent scope. In this case any modifications made to the
variable within the child scope will override (hide) the value in the parent scope.</p>
<p>Also, <code>ngIf</code> recreates elements using their compiled state. An example scenario of this behavior
is if an element&#39;s class attribute is directly modified after it&#39;s compiled, using something like 
jQuery&#39;s <code>.addClass()</code> method, and the element is later removed. When <code>ngIf</code> recreates the element
the added class will be lost because the original compiled state is used to regenerate the element.</p>
<p>Additionally, you can provide animations via the ngAnimate module to animate the <strong>enter</strong>
and <strong>leave</strong> effects.</p>
</div></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;ANY ng-if="{expression}"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3 id="Directive.info">Directive info</h3>
<div class="directive-info"><ul><li>This directive creates new scope.</li>
</ul>
</div>
<h3 id="Animations">Animations</h3>
<div class="animations"><ul><li>enter - happens just after the ngIf contents change and a new DOM element is created and injected into the ngIf container</li><li>leave - happens just before the ngIf contents are removed from the DOM</li></ul></div>
<a href="api/ngAnimate.$animate">Click here</a> to learn more about the steps involved in the animation.<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>ngIf</td><td><a href="" class="label type-hint type-hint-expression">expression</a></td><td><div class="ng-directive-page ng-directive-ngif-page"><p>If the <a href="guide/expression">expression</a> is falsy then
the element is removed from the DOM tree (HTML).</p>
</div></td></tr></tbody></table></div>
<h2 id="Example">Example</h2>
<div class="example"><div class="ng-directive-page ng-directive-ngif-page"><h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js angular-animate.js" source-edit-html="index.html-77" source-edit-css="animations.css" source-edit-js="" source-edit-json="" source-edit-unit="" source-edit-scenario=""></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-77" ng-html-wrap=" angular.js angular-animate.js"></pre>
<script type="text/ng-template" id="index.html-77">
  Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
  Show when checked:
  <span ng-if="checked" class="animate-if">
    I'm removed when the checkbox is unchecked.
  </span>
</script>
</div>
<div class="tab-pane" title="animations.css">
<pre class="prettyprint linenums" ng-set-text="animations.css"></pre>
<style type="text/css" id="animations.css">
  .animate-if {
    background:white;
    border:1px solid black;
    padding:10px;
  }

  .animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  }

  .animate-if.ng-enter,
  .animate-if.ng-leave.ng-leave-active {
    opacity:0;
  }

  .animate-if.ng-enter.ng-enter-active,
  .animate-if.ng-leave {
    opacity:1;
  }
</style>
</div>
</div><div class="pull-right"> <button class="btn btn-primary" ng-click="animationsOff=true" ng-hide="animationsOff">Animations on</button> <button class="btn btn-primary disabled" ng-click="animationsOff=false" ng-show="animationsOff">Animations off</button></div><h2>Demo</h4>
<div class="well doc-example-live animate-container" ng-class="{'animations-off':animationsOff == true}" ng-embed-app="" ng-set-html="index.html-77" ng-eval-javascript=""></div>
</div></div>
</div>