根据 ID 打开 angular-ui-bootstrap 手风琴 [英] Open angular-ui-bootstrap accordion based on ID

问题描述

我有手风琴:

<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

推荐答案

根据我的评论，尝试这样的事情...

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>

Plunker

这篇关于根据 ID 打开 angular-ui-bootstrap 手风琴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！