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

代わりの

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

この行を使用してください：

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

fiddle

Answer 2

ng-init = "expression"を使用するか、コントローラで設定できますが、ng-initは伝播するので、ng-initを使用することをお勧めします。

Answer 3

初期化されていない場合、デフォルト値のcollapsedはfalseです。 ng-initを使用する代わりに、コントローラまたはディレクティブでscope.collapsed = trueを初期化することができます。ng-init is costlyです。