打开基于ID的angular-ui-bootstrap手风琴 [英] Open angular-ui-bootstrap accordion based on ID
本文介绍了打开基于ID的angular-ui-bootstrap手风琴的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个手风琴:
<accordion>
<accordion-group ng-repeat="group in groups" heading="{{group.title}}" id="{{group.id}}" is-open="group.open">
<table class="table">
<tr>
<td>{{group.definition}}</td>
</tr>
</table>
</accordion-group>
</accordion>
,每个手风琴都有一个唯一的ID.
and each accordion has a unique ID.
我知道如何根据其位置打开手风琴:
I know how to open an accordion based on its position:
<button ng-click="groups[0].open = !groups[0].open">Toggle Title 1 based on index</button>
但是我如何根据它的ID打开一个手风琴呢?
but how do I open an accordion based on its ID?
我当前的尝试是在这里: http://plnkr.co/edit/c3GeaWfOgZ2YoQb2kUbW
My current attempt is here: http://plnkr.co/edit/c3GeaWfOgZ2YoQb2kUbW
推荐答案
在我的评论之后,尝试类似这样的事情...
Following on from my comment, try something like this...
在您的控制器中,创建一个地图来存储开放的群组信息
In your controller, create a map to store open group information
$scope.accordionGroups = {};
如果您希望默认打开一组,请尝试
If you want one group to default open, try this
$scope.accordionGroups[groups[0].id] = true;
然后在您的模板中使用它
Then use this in your template
<accordion-group ng-repeat="group in groups"
heading="{{group.title}}" id="{{group.id}}"
is-open="accordionGroups[group.id]">
要使用按钮切换组,请使用此
To toggle a group with your button, use this
<button ng-click="accordionGroups.title1 = !accordionGroups.title1">Toggle title1</button>
这篇关于打开基于ID的angular-ui-bootstrap手风琴的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文