AngularJS: ng-show vs display:none

Question

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.

Bar

Use ng-class instead and apply class that will have display: block in certain cases – Sedda

@Kailas please read the last para of the question. – Bar

why not go for ng-if instead? – Belden

let me try that, the thing is I am getting a very brief glimpse of the element with ngshow set to false. Let me see if thats also the case with ng-if. – Bar

nah, still facing the same problem. The element is shown initially for probably half a second and only then does the ng-if kick in. – Bar

try setting the default visiblity of the element as hidden and use ng-if it will work fine. – Belden

sorry, @Belden not working. – Bar

@maurycy, thanks it worked! – Bar

Or you can use old good ng-cloak if it takes that long to bootstrap your app – Sedda

well, the ng-class solution worked thanks a lot :) – Bar

I'll post it as an answer in that case :) – Sedda

Yes that would be a good idea. – Bar

Answer 1

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

Sedda

ng-cloak sounds like the op's root issue. However be aware angular needs to have loaded on the page for it to take effect. Angular doesn't have to be bootstrapped but it does need to be loaded. Otherwise you will need to target the attribute with css yourself if you have a slow loading page for what ever reason. – Cestus

Answer 2

Another simple alternative

style="{{show_element?'display:block !important':'display:none !important'}}"

Saturate

Answer 3

If you are just trying to hide the item so that you don't get a flash on-load, then instead of using the .item class set to display:none, you could simply set a class of .ng-hide to the element with ng-show on.

The AngularJS directive ng-show works by adding or removing a class of .ng-hide to the DOM element. The .ng-hide class applies the rule display: none !important;

<div class="ng-hide" ng-show="showElement">...</div>

Lornalorne

Answer 4

I would simply change the class. Ng-shows function is to simply add or remove the ng-hide class, which only propertie is a "display: none !important;". It is not ment to change the css of the classes.

What you could simply do is something like this:

<div class="{{element_class}} item">
</div>

And set the element_class to your class with display:block;

Working example: http://codepen.io/GriessbreiLP/pen/EVXQjK

Hope this might help you.

Edit: Nah, too slow, already mentioned two times.

Affluent