Question

点击＆＃34;切换＆＃34;我想切换div a）如何保持div内容默认打开/显示？ b）onclick如何切换类以实现从下到上的图标更改？

请参考下面的小提琴： http://jsfiddle.net/EhTZW/572/

HTML：

<h3>Toggle  with AngularJS</h3>

<div ng-app id="ng-app">
    <hr />
    <a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon glyphicon-chevron-down">Toggle</a>

    <div ng-show="collapsed">I am description for the above title, which was collapsed by default</div>
    <hr />

</div>

Answer 1

要更改图标，您可以使用 ngClass

要默认显示内容，请将ng-show转换为ng-hide

试试这个

<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon" ng-class="{'glyphicon-chevron-down' : !collapsed , 'glyphicon-chevron-up' : collapsed }">Toggle</a>
<div ng-hide="collapsed">I am description for the above title, which was collapsed by default</div>

的 DEMO

Answer 2

您只需要set开始时collapsed=true的值

Answer 3

<h3>Toggle  with AngularJS</h3>

<div ng-app id="ng-app">
<hr />
<!--use ng-class for conditions-->
<a href="#" ng-model="collapsed" ng-click="collapsed=!collapsed" class="glyphicon" ng-class="{'glyphicon-chevron-down':collapsed, 'otherIcon': !collapsed}">Toggle</a>
<!--ng-show to !collapsed for default open-->
<div ng-show="!collapsed">I am description for the above title, which was collapsed by default</div>
<hr />

</div>

Answer 4

你可以使用这样的东西

我是上述标题的描述，默认情况下已折叠

angularjs手风琴默认需要打开

4 个答案: