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 ディレクティブを設定できることは知っていますが、どのアコーディオンが開いているかをモデルに渡すにはどうすればよいですか?

追加の質問:
アコーディオンが常に 1 つ開いていることを確認するにはどうすればよいですか (複数ではなく、すべてが非表示になっているわけではありません)。

うまくいく解決策ですが、私はそれについてあまり満足していません:

<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