如何根据所选的手风琴组设置模型。 UI Bootstrap

时间:2013-05-17 07:44:32

标签: angularjs accordion angular-ui

我正在使用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;
}

0 个答案:

没有答案