- 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" class="ng-hide"></div> <!-- when $scope.myValue is falsy (element is visible) --> <div ng-hide="myValue"></div>
When the ngHide
expression evaluates to a truthy value then the .ng-hide
CSS class is added to the class attribute on the element causing it to become hidden. When falsy, 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
By default, the .ng-hide
class will style the element with display: none!important
. 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 { /* this is just another form of hiding an element */ display: block!important; position: absolute; top: -9999px; left: -9999px; }
By default you don't need to override in CSS anything and the animations will work around the display style.
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 the .ng-hide
CSS class is added and removed for you instead of your own CSS class.
// //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 { ... }
Keep in mind that, as of AngularJS version 1.3, there is no need to change the display property to block during animation states--ngAnimate will handle the style toggling automatically for you.
Directive Info
- This directive executes at priority level 0.
- This directive can be used as multiElement
Usage
- as attribute:
<ANY ng-hide="expression"> ... </ANY>
Animations
Animation | Occurs |
---|---|
addClass .ng-hide
| after the ngHide expression evaluates to a truthy value and just before the contents are set to hidden |
removeClass .ng-hide
| after the ngHide expression evaluates to a non truthy value and just before contents are set to visible |
Arguments
Param | Type | Details |
---|---|---|
ngHide | expression | If the expression is truthy then the element is shown or hidden respectively. |
Please login to continue.