如何在默认情况下制作手风琴以打开第一个元素? [英] How can I make by default accordion to make open first element?

问题描述

我在我的项目中使用引导手风琴.

这里正在工作 fiddler.

这是 HTML 代码:

<div ng-controller="AccordionDemoCtrl"><uib-accordion close-others="oneAtATime"><uib-accordion-group ng-repeat="分组分组" 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>
</uib-accordion-heading>{{group.content}}</uib-accordion-group></uib-手风琴>

这是控制器:

var app = angular.module('myapp', ['ui.bootstrap', 'ngAnimate'])app.controller('AccordionDemoCtrl', function($scope) {$scope.groups = [{title: "动态组头 - 1",内容:动态组体-1"}, {title: "动态组头 - 2",内容:《动态群体-2》}, {title: "动态组头 - 3",内容:《动态群体-3》}];});

我尝试使用这一行:

 is-open="true"

像这样:

 <uib-accordion-group Heading="{{group.title}}" ng-repeat="group in groups" is-open="true">{{group.content}}</uib-手风琴组>

但它默认打开所有项目.

如何让默认手风琴只打开第一个元素?

附言这是更新的 plunker

解决方案

请使用 ng-repeat 指令的 $first 来像 is-open="$first"

标记

<uib-accordion-group Heading="{{group.title}}"ng-repeat="分组"is-open="$first">{{group.content}}</uib-accordion-group></uib-手风琴>

在此预览

I use bootstrap accordion in my project.

Here is working fiddler .

Here is HTML code:

<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>

Here is controller:

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"
  }];
});

I tryed to use this row:

  is-open="true"

Like that:

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

But it opens by default all items.

How can I make by default accordion to make open only first element?

P.S. Here is updated plunker

解决方案

Do take use of $first of ng-repeat directive to open only 1st accordion like is-open="$first"

Markup

<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

这篇关于如何在默认情况下制作手风琴以打开第一个元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！