Geek Answers Handbook

AngularJS: ng-show vs display: none

I had a use case in which I should still hide the HTML element using CSS, as follows:

HTML:

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

CSS

.item {
    display: none;
}

But I need to switch the item visibility with ng-show after loading the page as follows:

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

But even if the parameter is $scope.show_elementset to true, the element will not become visible, i.e. the css property overrides AngularJS 'ng-show. Is there a way to give ng-show a higher priority?

Alternatively, you might think that I can save $scope.show_elementas false to hide it. But in this case, I get a very short idea of ​​the element when the page loads, which is not very good from a UX point of view.

+9
4

- ng-class, , , , .. display: block, , ng-cloak https://docs.angularjs.org/api/ng/directive/ngCloak

+5


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

, -, , .item, display:none, .ng-hide ng-show on.

AngularJS ng-show .ng-hide DOM. .ng-hide display: none !important;

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

. Ng-show , ng-hide, - "display: none! Important". css .

, , - :

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

element_class display: block;

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

, .

: , , .

-1

More articles:


All Articles