How do I set model according to chosen accordion g

2019-02-21 01:40发布

I'm working on accordion using Angularjs and this directive: http://angular-ui.github.io/bootstrap/#/accordion

I have an accordion similar to this:

<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>

I know that I can set is-open directive to specify if accordion-group is opened, but how I can pass which accordion is opened to model?

Additional question:
How can I make sure that there always one accordion opened(not multiple, and not all hidden)?

Solution that works fine, but I'm not so happy about it:

<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 style that make span full height and width:

.accordion-toggle {
    padding: 0;
}
.accordion-toggle span {
    display: block;
    padding: 8px 15px;
}

0条回答
登录 后发表回答