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昂貴 。

Answer 2

代替

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

使用此行：

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

小提琴

Answer 3

您可以使用ng-init =“ expression”或在控制器中進行設置，但我更喜歡ng-init，因為它會傳播。