Angular UI Bootstrap手风琴-未打开第一个手风琴组

Question

I am using UI-Bootstrap Accordion and populating content from JSON Object. Now i am trying to open first accordion group always on load but its not working.

I have used is-open setting as true but still not working. Please see below plunker for refrence.

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>

Thanks,

Answer 1

Angular having some inbuilt Variables in ng-repeat $index (0..length-1), $first,$middle,$last,$even,$odd this variables can help you to play easy :-)

refer :- https://docs.angularjs.org/api/ng/directive/ngRepeat for further information .

According to your expected output you just need to use $first in your 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>

Here i provided the Plunker which i already posted in my Comment :-

plnkr.co/edit/iWEuuv?p=preview

Answer 2

Just change is-open="this.open" to is-open="$first" and it will works.

 angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap','ngSanitize']); angular.module('ui.bootstrap.demo').controller('AccordionDemoCtrl', function ($scope) { $scope.oneAtATime = true; $scope.FAQs = [ { title: 'Overview', content: '<p>This Add-in reviews <b>External Users</b> for a Site Collection if number of days remaining to expire is <b>10 days</b>.Then generate and send <b>warning email</b> notifications to Site Collection Administrators/Person who sent external User Invite and Governance Team Memberrs.The warning email notification will contain following options :<ol><li> Extend Access</li><li> Remove User </li></ol></p><p>The same information regarding external users can be viewed through Site Actions Menu, Site Settings page and one time warning pop-up on site collection. This add-in also provisions an option in Site Actions Menu to display <b>Site Collection administrators</b>.</p>' }, { title: 'Who can use?', content: '<p>Users with only <b>admin</b> priviledges can view the external user details and edit their access time . However, <b>all</b> users can view the site administrator details. </p>' }, { title: 'How to Use?', content: '<p><ul><li>The add-in will be installed through <b>Spo.Provision</b> utility.</li><li>Right click on a row to perform \\'Extend Access\\' or \\'Remove User\\' operations from context menu.</li><li>In order to perform these opeartions for multiple users, select rows by holding <b>shift/Ctrl</b> keys and click on <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> for extending access and <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> for removing selected users. </li><li><b> Please note</b> that you cannot extend access if user already has access for maximum limit.</li></ul></p>' }, { title: 'Settings & Configuration', content: '<p><ul><li>The configuration for timer job such as cut-off time and warning message can be done using App.Config file.</li></ul></p>' }, { title: 'Compatibility', content: '<p>Compatible with IE10 and upper version. Latest version of Chrome & Firefox.</p>' } ]; $scope.status = { isFirstOpen: true }; }); 

 <!doctype html> <html ng-app="ui.bootstrap.demo"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.5.0/angular-sanitize.min.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div ng-controller="AccordionDemoCtrl"> <h1>OBJECT</h1> <uib-accordion close-others="oneAtATime"> <uib-accordion-group ng-repeat="faq in FAQs" 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> </div> </body> </html>