Javascript AngularJS：ng-show vs display:none
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33032081/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS: ng-show vs display:none
提问by Tarun Dugar
I had a use case whereby I have to keep an HTML element hidden by default using CSS as follows:
我有一个用例，我必须使用 CSS 默认隐藏 HTML 元素，如下所示：
HTML:
HTML：
<div class="item">
</div>
CSS:
CSS：
.item {
display: none;
}
But, I need to toggle the element's visibility using ng-show after the page has loaded as follows:
但是，我需要在页面加载后使用 ng-show 切换元素的可见性，如下所示：
<div class="item" ng-show="show_element">
</div>
But, even if $scope.show_elementis 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?
但是，即使$scope.show_element设置为 true，元素也不会变得可见，也就是说，css 属性覆盖了 AngularJS 的 ng-show。有没有办法给予 ng-show 更高的优先级？
Also, you may think I can keep $scope.show_elementas 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.
此外，您可能认为我$scope.show_element最初可以保持虚假以隐藏它。但在这种情况下，当页面加载时，我对元素的了解非常短暂，从 UX 的角度来看这并不好。
采纳答案by maurycy
One way to make it work in your case would be using ng-classwhere in case when element should be visible you can apply class with correct display property i.e. display: blockand if you suffer from slow bootstrap you can use ng-cloakcheck documentation here https://docs.angularjs.org/api/ng/directive/ngCloak
使其在您的情况下工作的一种方法是使用ng-classwhere 在元素应该可见的情况下，您可以应用具有正确显示属性的类，即display: block，如果您的引导缓慢，您可以ng-cloak在此处使用检查文档https://docs.angularjs。 org/api/ng/directive/ngCloak
回答by shreedhar bhat
Another simple alternative
另一个简单的选择
style="{{show_element?'display:block !important':'display:none !important'}}"
回答by lemmingworks
If you are just trying to hide the item so that you don't get a flash on-load, then instead of using the .itemclass set to display:none, you could simply set a class of .ng-hideto the element with ng-showon.
如果您只是想隐藏该项目，以便在加载时不会出现 Flash，那么您可以简单地将.item类设置为带有on的元素，而不是使用设置为display:none的类。.ng-hideng-show
The AngularJS directive ng-showworks by adding or removing a class of .ng-hideto the DOM element. The .ng-hideclass applies the rule display: none !important;
AngularJS 指令ng-show通过向.ng-hideDOM 元素添加或删除一个类来工作。本.ng-hide类应用规则display: none !important;
<div class="ng-hide" ng-show="showElement">...</div>
回答by Griessbrei
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.
我会简单地改变类。ng-shows 功能是简单地添加或删除 ng-hide 类，它的唯一属性是“display: none !important;”。更改类的 css 不是必需的。
What you could simply do is something like this:
你可以简单地做的是这样的：
<div class="{{element_class}} item">
</div>
And set the element_classto your class with display:block;
并使用display:block;将element_class设置为您的类。
Working example: http://codepen.io/GriessbreiLP/pen/EVXQjK
工作示例：http: //codepen.io/GriessbreiLP/pen/EVXQjK
Hope this might help you.
希望这可以帮助你。
Edit: Nah, too slow, already mentioned two times.
编辑：不，太慢了，已经提到了两次。
