如何在 AngularJS 中显示隐藏元素？答案

【问题标题】：How to display a hidden element in AngularJS?如何在 AngularJS 中显示隐藏元素？
【发布时间】：2014-02-09 19:01:14
【问题描述】：

是否可以默认隐藏一个元素（如果 JavaScript 关闭则它不会显示）并让 AngularJS 覆盖样式以显示它？

我在作用域上有一个函数，它应该返回一个覆盖样式来显示元素：

$scope.style = function() {
  return { "display": "block!important" };
}

元素本身具有隐藏它的原始 CSS 以及 ng-style 指令：

<h4 class="original" ng-style="style()">

CSS 首先隐藏元素：

.original {
  display: none;
}

有一个不工作的demo here。

【问题讨论】：

【解决方案1】：

它有效。实际问题在这里：

ul {
  list-style-type: none;
  color: #fff;
}

白色背景上的白色 (#fff) 文本。删除color: #fff; 即可。

这是working plunker。

另外，!important does not work 和 ng-style。

【讨论】：

【解决方案2】：

你可以使用ng-class:

<p class="hidden" ng-class="{visible: show}">Lorem ipsum dolor</p>

然后有两个 CSS 类：

.hidden {
  display: none;  
}
.visible {
  display: block;
}

并将show 属性添加到作用域（也可以是ng-model）：

$scope.show = true;

演示： http://jsbin.com/qibu/1/edit

【讨论】：

【解决方案3】：

你可以试试 ng-class

.show {
    display: block !important;
}

<h4 class="original" ng-class="{show: isJSon}">

$scope.isJSon = true;

【讨论】：