我有一个带有“ V形”图标的手风琴,单击该图标可将其指向上方或下方,这是通过ng-click
和完成的ng-class
。手风琴只允许同时打开一个面板-因此,当我单击关闭的面板时,打开的面板将关闭。但是,如何在即将关闭的打开面板上切换人字形图标ng-click
呢?
本来我可以用DOM操作等来做到这一点,但是由于这是角度视图的局部视图,因此我无法做到。
码:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen">
<i class="glyphicon" ng-class="{'glyphicon-chevron-up': firstpaneisopen, 'glyphicon-chevron-down': !firstpaneisopen}"></i> Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Body
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" ng-click="secondpaneisopen=!secondpaneisopen>
<i class="glyphicon" ng-class="{'glyphicon-chevron-up': secondpaneisopen, 'glyphicon-chevron-down': !secondpaneisopen}"></i> Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Body
</div>
</div>
</div>
</div>
我建议您从AngularUI团队中检出“ UI Bootstrap”。它是“用纯AngularJS编写的Bootstrap组件”的集合。
http://angular-ui.github.io/bootstrap/
他们的网站上有一个示例,显示了他们的手风琴指令ng-class
用于切换人字形图标。
http://angular-ui.github.io/bootstrap/#/accordion
他们的指令还具有一个close-others
属性,如果为true,则可以确保在任何时候仅打开一个面板。
<accordion close-others="true">
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句