我正在使用UI-Bootstrap手风琴,并从JSON对象填充内容。现在,我正在尝试打开始终处于加载状态的第一个手风琴组,但它无法正常工作。

我已将is-open设置设为true,但仍无法正常工作。请参阅下面的缩略语以获取参考。

Plunker

<uib-accordion close-others="oneAtATime">
        <uib-accordion-group ng-repeat="faq in FAQs" is-open="this.open">
            <uib-accordion-heading>
                <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                </div>
            </uib-accordion-heading>
            <div  ng-bind-html="faq.content"></div>
        </uib-accordion-group>
        </uib-accordion>


谢谢,

最佳答案

Angular在ng-repeat $index(0..length-1),$first,$middle,$last,$even,$odd中有一些内置变量,此变量可以帮助您轻松玩:-)

请参阅:-https://docs.angularjs.org/api/ng/directive/ngRepeat以获取更多信息。

根据您的预期输出,您只需要在$first中使用is.open

<uib-accordion close-others="oneAtATime" ng-repeat="faq in FAQs">
            <uib-accordion-group   is-open="$first">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>

                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
             <uib-accordion-group   ng-if="!$first" is-open="false">
                <uib-accordion-heading>
                    <div>{{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': this.open, 'glyphicon-chevron-down': !this.open}"></i>
                    </div>
                </uib-accordion-heading>

                <div  ng-bind-html="faq.content"></div>
            </uib-accordion-group>
            </uib-accordion>


在这里,我提供了已经在我的评论中发布的Plunker:-

plnkr.co/edit/iWEuuv?p=preview

09-25 17:14
查看更多