Question

我在其中有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，但不适用于一个按钮。

Answer 1

以下是您的plunkr示例。它适用于我btn-group。

Answer 2

我刚刚使用Angular v1.2.2遇到了这个问题。

似乎Bootstrap的样式规则为.hidden-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的版本，请检查样式规则更改）。如果有人有更合适的解决方案，请随时贡献。

Answer 3

bootstraps'.hidden-xs课程为可见元素添加了display:block，这些元素打破了角度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>

Answer 4

我也遇到过这个问题。最后我发现我设置了风格＆＃34;可见性：隐藏＆＃34;在我自己的CSS文件中的div。因此无论我如何更改ng-show中的表达式，div总是被隐藏。这意味着始终应用自己样式中的可见性样式，angularjs永远不会更改此css属性值。要使用ng-show / ng-hide，首先需要确保不向DOM元素添加任何显示/隐藏样式，只需将控件移交给角度即可。

Answer 5

尝试用ng-show替换ng-hide / ng-if。应该做的诀窍:)）

Angular ng-show指令不适用于按钮

5 个答案: