Question

我想编写一个简单的AngularJS网站，我可以在其中显示最初隐藏的HTML元素（及其所有子元素）。

我必须遵循HTML结构（摘录）：

<div class="hiddenStuff">
  <h3>Game Over</h3>
  <p class="hiddenMsg">You have won!</p>
  <a href="#" class="buttonStart">Do it again!</a>
</div>

默认情况下，我不会在CSS中显示div＆＃34; hiddenStuff＆＃34;：

.hiddenStuff{
  display: none;
}

但是现在在AngularJS / JavaScript代码中我想再次显示隐藏的HTML结构：

angular.element(document.querySelector('.hiddenStuff')).css({display:'block'});

但这只显示div元素，而不是div元素中包含的h3，p和a标签。我怎样才能展示一切？

谢谢

Answer 1

我认为最好的方法是使用ng-show

    <div ng-show="$ctrl.showDiv" class="hiddenStuff">
    <h3>Game Over</h3>
  <p class="hiddenMsg">You have won!</p>
  <a href="#" class="buttonStart">Do it again!</a>
</div>

然后在您的控制器中，您可以默认将变量showDiv声明为false，并在想要显示div时将showDiv的值更改为true

https://docs.angularjs.org/api/ng/directive/ngShow

AngularJS显示带子元素的div

1 个答案: