默认情况下如何制作手风琴以打开第一个元素?
How can I make by default accordion to make open first element?
我在我的项目中使用 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>
但它默认打开所有项目。
如何让手风琴默认只打开第一个元素?
P.S。这里更新了plunker
请使用 $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>
我在我的项目中使用 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>
但它默认打开所有项目。
如何让手风琴默认只打开第一个元素?
P.S。这里更新了plunker
请使用 $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>