AngularJS：如何在默认情况下显示元素，并在按下按钮时切换它

Question

我需要切换一个需要初始可见的元素。在我的情况下，切换工作正常但元素（menu类）最初是隐藏的......

JSFIDDLE

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
    <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed">
    <ol>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </div>
</div>

Answer 1

如果未初始化，则collapsed的默认值为false。您可以在控制器或指令中初始化scope.collapsed = true，而不是使用ng-init，因为ng-init is costly。

Answer 2

而不是

<div class="menu" ng-show="collapsed">

使用这一行：

<div class="menu" ng-show="!collapsed">

fiddle

Answer 3

您可以使用ng-init =“expression”或在控制器中设置，但我更喜欢ng-init，因为它会传播。