0

我正在使用 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 指令来指定是否打开手风琴组，但是如何将打开的手风琴传递给模型？

附加问题：
如何确保始终打开一个手风琴（不是多个，也不是全部隐藏）？

工作正常的解决方案，但我对此并不满意：

<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;
}
4

0 回答 0