EVOLUTION-MANAGER

Edit File: ngHide.html

<a href='https://github.com/angular/angular.js/edit/v1.3.x/src/ng/directive/ngShowHide.js?message=docs(ngHide)%3A%20describe%20your%20change...#L179' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit">&nbsp;</i>Improve this Doc</a>

<a href='https://github.com/angular/angular.js/tree/v1.3.9/src/ng/directive/ngShowHide.js#L179' class='view-source pull-right btn btn-primary'>
  <i class="glyphicon glyphicon-zoom-in">&nbsp;</i>View Source
</a>

<header class="api-profile-header">
  <h1 class="api-profile-header-heading">ngHide</h1>
  <ol class="api-profile-header-structure naked-list step-list">
    
    <li>
      - directive in module <a href="api/ng">ng</a>
    </li>
  </ol>
</header>

<div class="api-profile-description">
  <p>The <code>ngHide</code> directive shows or hides the given HTML element based on the expression
provided to the <code>ngHide</code> attribute. The element is shown or hidden by removing or adding
the <code>ng-hide</code> CSS class onto the element. The <code>.ng-hide</code> CSS class is predefined
in AngularJS and sets the display style to none (using an !important flag).
For CSP mode please add <code>angular-csp.css</code> to your html file (see <a href="api/ng/directive/ngCsp">ngCsp</a>).</p>
<pre><code class="lang-html">&lt;!-- when $scope.myValue is truthy (element is hidden) --&gt;
&lt;div ng-hide=&quot;myValue&quot; class=&quot;ng-hide&quot;&gt;&lt;/div&gt;

&lt;!-- when $scope.myValue is falsy (element is visible) --&gt;
&lt;div ng-hide=&quot;myValue&quot;&gt;&lt;/div&gt;
</code></pre>
<p>When the <code>ngHide</code> expression evaluates to a truthy value then the <code>.ng-hide</code> CSS class is added to the class
attribute on the element causing it to become hidden. When falsy, the <code>.ng-hide</code> CSS class is removed
from the element causing the element not to appear hidden.</p>
<h2 id="why-is-important-used-">Why is !important used?</h2>
<p>You may be wondering why !important is used for the <code>.ng-hide</code> CSS class. This is because the <code>.ng-hide</code> selector
can be easily overridden by heavier selectors. For example, something as simple
as changing the display style on a HTML list item would make hidden elements appear visible.
This also becomes a bigger issue when dealing with CSS frameworks.</p>
<p>By using !important, the show and hide behavior will work as expected despite any clash between CSS selector
specificity (when !important isn&#39;t used with any conflicting styles). If a developer chooses to override the
styling to change how to hide an element then it is just a matter of using !important in their own CSS code.</p>
<h3 id="overriding-ng-hide-">Overriding <code>.ng-hide</code></h3>
<p>By default, the <code>.ng-hide</code> class will style the element with <code>display: none!important</code>. If you wish to change
the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the <code>.ng-hide</code>
class in CSS:</p>
<pre><code class="lang-css">.ng-hide {
  /* this is just another form of hiding an element */
  display: block!important;
  position: absolute;
  top: -9999px;
  left: -9999px;
}
</code></pre>
<p>By default you don&#39;t need to override in CSS anything and the animations will work around the display style.</p>
<h2 id="a-note-about-animations-with-nghide-">A note about animations with <code>ngHide</code></h2>
<p>Animations in ngShow/ngHide work with the show and hide events that are triggered when the directive expression
is true and false. This system works like the animation system present with ngClass, except that the <code>.ng-hide</code>
CSS class is added and removed for you instead of your own CSS class.</p>
<pre><code class="lang-css">//
//a working example can be found at the bottom of this page
//
.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition: 0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }
</code></pre>
<p>Keep in mind that, as of AngularJS version 1.3.0-beta.11, there is no need to change the display
property to block during animation states--ngAnimate will handle the style toggling automatically for you.</p>

</div>

<div>

<h2>Directive Info</h2>
  <ul>
    
    <li>This directive executes at priority level 0.</li>
  </ul>

<h2 id="usage">Usage</h2>
  <div class="usage">
  
    <ul>
    <li>as attribute:
        <pre><code>&lt;ANY&#10;  ng-hide=&quot;&quot;&gt;&#10;...&#10;&lt;/ANY&gt;</code></pre>
      </li>
    
  </div>
  
  <h2 id="animations">Animations</h2>
  <p>removeClass: <code>.ng-hide</code> - happens after the <code>ngHide</code> expression evaluates to a truthy value and just before the contents are set to hidden
addClass: <code>.ng-hide</code> - happens after the <code>ngHide</code> expression evaluates to a non truthy value and just before the contents are set to visible</p>

<a href="api/ngAnimate/service/$animate">Click here</a> to learn more about the steps involved in the animation.
<section class="api-section">
  <h3>Arguments</h3>

<table class="variables-matrix input-arguments">
  <thead>
    <tr>
      <th>Param</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    
    <tr>
      <td>
        ngHide
        
        
      </td>
      <td>
        <a href="" class="label type-hint type-hint-expression">expression</a>
      </td>
      <td>
        <p>If the <a href="guide/expression">expression</a> is truthy then
    the element is shown or hidden respectively.</p>

</td>
    </tr>
    
  </tbody>
</table>

</section>

<h2 id="example">Example</h2><p>

<div>
  <a ng-click="openPlunkr('examples/example-example90')" class="btn pull-right">
    <i class="glyphicon glyphicon-edit">&nbsp;</i>
    Edit in Plunker</a>

<div class="runnable-example-file" 
      name="index.html"
      language="html"
      type="html">
      <pre><code>Click me: &lt;input type=&quot;checkbox&quot; ng-model=&quot;checked&quot;&gt;&lt;br/&gt;&#10;&lt;div&gt;&#10;  Show:&#10;  &lt;div class=&quot;check-element animate-hide&quot; ng-show=&quot;checked&quot;&gt;&#10;    &lt;span class=&quot;glyphicon glyphicon-thumbs-up&quot;&gt;&lt;/span&gt; I show up when your checkbox is checked.&#10;  &lt;/div&gt;&#10;&lt;/div&gt;&#10;&lt;div&gt;&#10;  Hide:&#10;  &lt;div class=&quot;check-element animate-hide&quot; ng-hide=&quot;checked&quot;&gt;&#10;    &lt;span class=&quot;glyphicon glyphicon-thumbs-down&quot;&gt;&lt;/span&gt; I hide when your checkbox is checked.&#10;  &lt;/div&gt;&#10;&lt;/div&gt;</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="glyphicons.css"
      language="css"
      type="css">
      <pre><code>@import url(../../components/bootstrap-3.1.1/css/bootstrap.css);</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="animations.css"
      language="css"
      type="css">
      <pre><code>.animate-hide {&#10;  -webkit-transition: all linear 0.5s;&#10;  transition: all linear 0.5s;&#10;  line-height: 20px;&#10;  opacity: 1;&#10;  padding: 10px;&#10;  border: 1px solid black;&#10;  background: white;&#10;}&#10;&#10;.animate-hide.ng-hide {&#10;  line-height: 0;&#10;  opacity: 0;&#10;  padding: 0 10px;&#10;}&#10;&#10;.check-element {&#10;  padding: 10px;&#10;  border: 1px solid black;&#10;  background: white;&#10;}</code></pre>
    </div>
  
    <div class="runnable-example-file" 
      name="protractor.js"
      type="protractor"
      language="js">
      <pre><code>var thumbsUp = element(by.css(&#39;span.glyphicon-thumbs-up&#39;));&#10;var thumbsDown = element(by.css(&#39;span.glyphicon-thumbs-down&#39;));&#10;&#10;it(&#39;should check ng-show / ng-hide&#39;, function() {&#10;  expect(thumbsUp.isDisplayed()).toBeFalsy();&#10;  expect(thumbsDown.isDisplayed()).toBeTruthy();&#10;&#10;  element(by.model(&#39;checked&#39;)).click();&#10;&#10;  expect(thumbsUp.isDisplayed()).toBeTruthy();&#10;  expect(thumbsDown.isDisplayed()).toBeFalsy();&#10;});</code></pre>
    </div>

</p>

</div>