我正在使用Angularjs和这个指令制作手风琴:http://angular-ui.github.io/bootstrap/#/accordion
我有一个类似的手风琴:
<accordion close-others="true">
<accordion-group heading="Static Header1">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Static Header 2">
This content is straight in the template.
</accordion-group>
<accordion-group heading="Static Header 3">
This content is straight in the template.
</accordion-group>
</accordion>
我知道我可以设置is-open指令来指定是否打开accordion-group,但是我如何才能将哪个手风琴打开到模型?
补充问题:
如何确保手风琴总是打开(不是多个,而不是全部隐藏)?
<script type="text/ng-template" id="template/accordion/accordion-group.html">
<div class="accordion-group">
<div class="accordion-heading" >
<a class="accordion-toggle no-padding" ng-click="isOpen = true" accordion-transclude="heading">{% heading %}</a>
</div>
<div class="accordion-body" collapse="!isOpen">
<div class="accordion-inner" ng-transclude></div>
</div>
</div>
</script>
<accordion close-others="true">
<accordion-group>
<accordion-heading>
<span ng-click="chosen = 'acc1'">Accordion 1</span>
</accordion-heading>
This content is straight in the template.
</accordion-group>
<accordion-group>
<accordion-heading>
<span ng-click="chosen = 'acc2'">Accordion 2</span>
</accordion-heading>
This content is straight in the template.
</accordion-group>
<accordion-group>
<accordion-heading>
<span ng-click="chosen = 'acc3'">Accordion 3</span>
</accordion-heading>
This content is straight in the template.
</accordion-group>
</accordion>
使样式跨度达到高度和宽度的CSS样式:
.accordion-toggle {
padding: 0;
}
.accordion-toggle span {
display: block;
padding: 8px 15px;
}