Improve this doc  View Source

ngHide

  1. - directive in module ng

The ngHide directive shows or hides the given HTML element based on the expression provided to the ngHide attribute. The element is shown or hidden by removing or adding the ng-hide CSS class onto the element. The .ng-hide CSS class is predefined in AngularJS and sets the display style to none (using an !important flag). For CSP mode please add angular-csp.css to your html file (see ngCsp).

<!-- when $scope.myValue is truthy (element is hidden) -->
<div ng-hide="myValue"></div>

<!-- when $scope.myValue is falsy (element is visible) -->
<div ng-hide="myValue" class="ng-hide"></div>

When the ngHide expression evaluates to true then the .ng-hide CSS class is added to the class attribute on the element causing it to become hidden. When false, the ng-hide CSS class is removed from the element causing the element not to appear hidden.

Why is !important used?

You may be wondering why !important is used for the .ng-hide CSS class. This is because the .ng-hide 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.

By using !important, the show and hide behavior will work as expected despite any clash between CSS selector specificity (when !important isn'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.

Overriding .ng-hide

If you wish to change the hide behavior with ngShow/ngHide then this can be achieved by restating the styles for the .ng-hide class in CSS:

.ng-hide {
  //!annotate CSS Specificity|Not to worry, this will override the AngularJS default...
  display:block!important;

  //this is just another form of hiding an element
  position:absolute;
  top:-9999px;
  left:-9999px;
}

Just remember to include the important flag so the CSS override will function.

Note: Here is a list of values that ngHide will consider as a falsy value (case insensitive):
"f" / "0" / "false" / "no" / "n" / "[]"

A note about animations with ngHide

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 you must also include the !important flag to override the display property so that you can perform an animation when the element is hidden during the time of the animation.

//
//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;
  display:block!important;
}

.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 { ... }

Directive Info

Usage

Animations

removeClass: .ng-hide - happens after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden addClass: .ng-hide - happens after the ngHide expression evaluates to a non truthy value and just before the contents are set to visible

Click here to learn more about the steps involved in the animation.

Arguments

Param Type Details
ngHide expression

If the expression is truthy then the element is shown or hidden respectively.

Example

  Edit in Plunker
Click me: <input type="checkbox" ng-model="checked"><br/>
<div>
  Show:
  <div class="check-element animate-hide" ng-show="checked">
    <span class="glyphicon glyphicon-thumbs-up"></span> I show up when your checkbox is checked.
  </div>
</div>
<div>
  Hide:
  <div class="check-element animate-hide" ng-hide="checked">
    <span class="glyphicon glyphicon-thumbs-down"></span> I hide when your checkbox is checked.
  </div>
</div>
@import url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css);
.animate-hide {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-hide.ng-hide-add,
.animate-hide.ng-hide-remove {
  display:block!important;
}

.animate-hide.ng-hide {
  line-height:0;
  opacity:0;
  padding:0 10px;
}

.check-element {
  padding:10px;
  border:1px solid black;
  background:white;
}
var thumbsUp = element(by.css('span.glyphicon-thumbs-up'));
var thumbsDown = element(by.css('span.glyphicon-thumbs-down'));

it('should check ng-show / ng-hide', function() {
  expect(thumbsUp.isDisplayed()).toBeFalsy();
  expect(thumbsDown.isDisplayed()).toBeTruthy();

  element(by.model('checked')).click();

  expect(thumbsUp.isDisplayed()).toBeTruthy();
  expect(thumbsDown.isDisplayed()).toBeFalsy();
});