Question

我在我的项目中使用bootstrap手风琴。

以下是fiddler。

这是HTML代码：

<div ng-app="myapp">
  <div ng-controller="AccordionDemoCtrl">
    <uib-accordion close-others="oneAtATime">
      <uib-accordion-group ng-repeat="group in groups" is-open="isOpen">
                      <uib-accordion-heading>
                    <div class="text-center">
                        <strong>{{group.title}}</strong>
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                    </div>
                </uib-accordion-heading>
      {{group.content}}</uib-accordion-group>
    </uib-accordion>
  </div>
</div>

这是控制器：

var app = angular.module('myapp', ['ui.bootstrap', 'ngAnimate'])

app.controller('AccordionDemoCtrl', function($scope) {
  $scope.groups = [{
    title: "Dynamic Group Header - 1",
    content: "Dynamic Group Body - 1"
  }, {
    title: "Dynamic Group Header - 2",
    content: "Dynamic Group Body - 2"
  }, {
    title: "Dynamic Group Header - 3",
    content: "Dynamic Group Body - 3"
  }];
});

我试着使用这一行：

  is-open="true"

就像那样：

  <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"  is-open="true">{{group.content}}</uib-accordion-group>

但它会默认打开所有项目。

如何在默认情况下使用accordion来打开第一个元素？

P.S。此处已更新plunker

Answer 1

请使用$first ng-repeat指令仅打开第一支手风琴is-open="$first"

<强>标记

<uib-accordion close-others="oneAtATime">
  <uib-accordion-group heading="{{group.title}}" 
     ng-repeat="group in groups" 
     is-open="$first">
       {{group.content}}
  </uib-accordion-group>
</uib-accordion>

Preview Here

我如何制作默认手风琴来打开第一个元素？

1 个答案: