2

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

4

5 回答 5

1

我刚刚使用 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 的版本，请检查样式规则的更改）。如果有人有更合适的解决方案，请随时贡献。

于 2014-03-12T05:24:10.313 回答
1

bootstraps 的.hidden-xs类增加display:block了可见元素，它破坏了 angularng-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>
于 2014-03-19T10:51:19.843 回答
1

这是适合您的plunkr示例。它适用于我btn-group。

于 2014-01-20T14:10:46.283 回答
0

我也遇到了这个问题。最后我发现我在自己的CSS文件中将样式“可见性：隐藏”设置为div。所以无论我如何更改 ng-show 中的表达式，div 始终是隐藏的。这意味着始终应用您自己样式的可见性样式，angularjs 永远不会更改此 css 属性值。要使用 ng-show/ng-hide，首先需要确保不要向 DOM 元素添加任何显示/隐藏样式，只需将控制权交给 angular。

于 2014-11-03T21:30:01.383 回答
0

尝试将ng-show/ng-hide替换为ng-if. 应该做的伎俩:)

于 2018-02-07T22:02:36.223 回答