AngularJS: ng-show vs display:none
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
Another simple alternative
style="{{show_element?'display:block !important':'display:none !important'}}"
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>