angular.directive.ng:show.html

<h1>angular.directive.ng:show</h1>
<fieldset class="workInProgress"><legend>Work in Progress</legend>
This page is currently being revised. It might be incomplete or contain inaccuracies.</fieldset>
<h2>Description</h2>
<p>The <code>ng:show</code> and <code>ng:hide</code> allows you to show or hide a portion
of the HTML conditionally.</p><h2>Usage</h2>
<pre class="brush: js; html-script: true;">&lt;ANY ng:show="expression"&gt;
   ...
&lt;/ANY&gt;</pre>
<h3>Parameters</h3>
<ul class="parameters"><li><code ng:non-bindable="">expression – {expression} – </code>
if truthy then the element is 
shown or hidden respectively.</li>
</ul>
<h2>Example</h2>
<doc:example><doc:source>Click me: &lt;input type="checkbox" name="checked"&gt;&lt;br/&gt;
Show: &lt;span ng:show="checked"&gt;I show up when you checkbox is checked?&lt;/span&gt; &lt;br/&gt;
Hide: &lt;span ng:hide="checked"&gt;I hide when you checkbox is checked?&lt;/span&gt;</doc:source>
<doc:scenario>it('should check ng:show / ng:hide', function(){
  expect(element('.doc-example-live span:first:hidden').count()).toEqual(1);
  expect(element('.doc-example-live span:last:visible').count()).toEqual(1);
  
  input('checked').check();
  
  expect(element('.doc-example-live span:first:visible').count()).toEqual(1);
  expect(element('.doc-example-live span:last:hidden').count()).toEqual(1);
});</doc:scenario>
</doc:example>