javascript - Angular UI Bootstrap Accordion - 第一个 Accordion 组未打开

Question

我正在使用 UI-Bootstrap Accordion 并从 JSON 对象填充内容。现在我试图打开第一个 Accordion 组始终处于加载状态，但它不起作用。

我已使用 is-open 设置为 true 但仍然无法正常工作。请参阅下面的 plunker 以供引用。

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>

谢谢

Answer 1

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

引用:- https://docs.angularjs.org/api/ng/directive/ngRepeat欲了解更多信息。

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

<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