Angular ng-show指令不适用于按钮
Angular ng-show指令不适用于按钮
提问于 2014-01-20 21:36:48
我有angular.js web应用程序和btn-group，如下所示：
<div class="btn-group>
<button class="btn btn-default hidden-xs">....</button>
<button class="btn btn-default hidden-xs">....</button>
<button class="btn btn-default hidden-xs">....</button>
</div>我想隐藏其中一个按钮，并添加了：
<button ng-show="show_button">....</button>和在控制器中
$scope.show_button = false;
但我看到了按钮。为什么？ng-show适用于整个btn-group，但不适用于一个按钮。
回答 5
Stack Overflow用户
发布于 2014-01-20 22:10:46
这是为您提供的plunkr示例。它适用于我在btn-group中的工作。
Stack Overflow用户
发布于 2014-03-12 13:24:10
我刚刚在使用Angular v1.2.2时遇到了这个问题。
似乎Bootstrap的.hide-xs的样式规则：
.hidden-xs { display: block !important; }
@media (max-width: 767px) {
.hidden-xs { display: none !important; }
}覆盖来自Angular (v1.2.2)的注入内联样式表(预先添加而不是附加到头部)中的样式规则，用于.ng-hide (假设也是.ng-show )。
[ng\:cloak], [ng-cloak], [data-ng-cloak],
[x-ng-cloak], .ng-cloak, .x-ng-cloak,
.ng-hide {
display: none !important;
}由于目前缺乏更好的解决方案，请将您需要的angular样式表或特定规则添加到您的文档、样式表或其他方式中。(然后，如果更改Angular的版本，请检查样式规则是否更改)。如果有人有更合适的解决方案，请随时贡献。
Stack Overflow用户
发布于 2014-03-19 18:51:20
bootstraps的.hidden-xs类为可见元素添加了display:block，这破坏了angular的ng-show和ng-hide类。
相反，可以使用自定义的.my-hidden-xs类：
// my-style.css
@media (max-width: 767px) {
.my-hidden-xs {
display: none !important;
}
}
// index.html
<button class="btn btn-default my-hidden-xs" ng-show="show_button"></button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/21235516
复制相关文章
相似问题
腾讯云开发者
