Question

我正在使用UI-Bootstrap Accordion并从JSON Object填充内容。现在我正试图打开第一个手风琴组，但它不起作用。

我已将 is-open 设置为 true ，但仍无效。请参阅下面的plunker for refrence。

<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了解更多信息。

根据您的预期输出，您只需在$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

Answer 2

只需将is-open="this.open"更改为is-open="$first"即可。

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>

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

2 个答案: