AngularJS:如何默认显示元素，并在按下按钮时切换

AngularJS: How to display element by default and toggle it when a button is pressed

本文关键字：按钮 元素 何默认 显示 默认 AngularJS      更新时间：2023-09-26

我需要切换一个需要初始可见的元素。在我的情况下，切换工作正常，但元素（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>

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

而不是

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

使用这行：

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

小提琴

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

相关文章：