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