html - 可见性隐藏在 AngularJs 中？

Question

<button id="tagBtnId" name="TagsFilter" ng-show="disableTagButton">Tags</button>

ng-show 应用display: none 或display: block 属性但我想应用visibility: hidden 和 visibility: visible 属性。

Answer 1

您可以使用 ng-class或 ng-style指令如下

ng-class

这将在只有 disableTagButton 为真时将类 myclass 添加到按钮，如果 disableTagButton 为假则 myclass 将从按钮中移除

表达式传递给ng-class可以是表示以空格分隔的类名的字符串、数组或类名到 bool 值的映射。

1 - 空格分隔的类名

.. ng-class="{strike: deleted, bold: important, red: error}".. 

2 - 一个数组

.. ng-class="[style1, style2, style3]".. 

style1、style2 和 style3 是 css 类，查看下面的演示以获取更多信息。

2 - 表达式

.. ng-class="'my-class' : someProperty ? true: false".. 

如果 someProperty 存在则添加 .my-class 否则删除它。

If the css class name in the ng-class is dash separated then you need to define it as string like .. ng-class="'my-class' : .. else you can define it as string or not as .. ng-class="myClass : ..

ng-class DEMO

<button id="tagBtnId" name="TagsFilter" ng-class="{'myClass': disableTagButton}">Tags</button>

<style>
   .myClass {
       visibility: hidden
    }
</style>

---

ng-style

表达式将 [ng-style][2] 评估传递给一个对象，该对象的键是 CSS 样式名称，值是这些 CSS 键的对应值。

例如:

.. ng-style="{_key_ : _value_}"... => _key_ 是 css 属性，而 _value_ 设置属性(property)值(value)。例如 => .. ng-style="{color : 'red'}"...

If your using something like background-color then its not a valid key of a object then it needs to be quoted as .. ng-style="{'background-color' : 'red'}" ... same as ng-class.

<button id="tagBtnId" name="TagsFilter" ng-style="disableTagButton">Tags</button>

那么你的disableTagButton应该是这样的

$scope.disableTagButton = {'visibility': 'hidden'}; // then button will hidden.

$scope.disableTagButton = {'visibility': 'visible'}; // then button will visible.

因此您可以通过更改 $scope.disableTagButton 来更改按钮的可见性。

或者您可以将它用作内联表达式，

ng-style="{'visibility': someVar ? 'visible' : 'hidden'}"

是 someVar 评估为 true 然后可见性设置为 visible 否则可见性设置为 hidden。