AngularJS: ng-show vs display:none

javascript css angularjs ng-show
Tarun Dugar picture Tarun Dugar · Oct 9, 2015 · Viewed 24.1k times · Source

I had a use case whereby I have to keep an HTML element hidden by default using CSS as follows:

HTML:

<div class="item">
</div>

CSS:

.item {
    display: none;
}

But, I need to toggle the element's visibility using ng-show after the page has loaded as follows:

<div class="item" ng-show="show_element">
</div>

But, even if $scope.show_element is set to true, the element doesn't become visible, that is, the css property is overriding AngularJS' ng-show. Is there any way to give ng-show more priority?

Also, you may think I can keep $scope.show_element as false initially to hide it. But in that case, I get a very short glimpse of the element when the page is loading which is not good from the UX point of view.

Answer

maurycy picture maurycy · Oct 9, 2015

One way to make it work in your case would be using ng-class where in case when element should be visible you can apply class with correct display property i.e. display: block and if you suffer from slow bootstrap you can use ng-cloak check documentation here https://docs.angularjs.org/api/ng/directive/ngCloak

Related questions

AngularJS ng-show animation cross-fade inside ng-repeat

Simple (but not for me!) angularjs show/hide animation problem. I have searched high and low but not found the solution to this specific problem, which can perhaps be best explained with an example and a "challenge". First, the example: …

Read More
ng-show disturbing div layout - angularJS

I am using ng-show="!notesOpened" to hide a div if the notesOpened variable is true. However when hidden it messes up layout. Is there a way to make ng-show act in the same way as the css property visibility:hidden? …

Read More
Angularjs toggle div visibility

I am trying to toggle a div text on click of a button. I tried taking a scope variable and toggeling classname based on the variable. Where am I making the mistake here <button ng-click="toggle()">test</…

Read More