基于ID打开angular-ui-bootstrap手风琴

时间:2015-03-26 23:02:44

标签: angularjs 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。

我知道如何根据其位置打开手风琴:

 <button ng-click="groups[0].open = !groups[0].open">Toggle Title 1 based on index</button>

但如何根据其ID打开手风琴?

我目前的尝试是:http://plnkr.co/edit/c3GeaWfOgZ2YoQb2kUbW

1 个答案:

答案 0 :(得分:2)

继续我的评论,尝试这样的事情......

在您的控制器中,创建一个地图以存储打开的群组信息

$scope.accordionGroups = {};

如果您想要一个组默认打开,请尝试使用

$scope.accordionGroups[groups[0].id] = true;

然后在模板中使用它

<accordion-group ng-repeat="group in groups"
    heading="{{group.title}}" id="{{group.id}}"
    is-open="accordionGroups[group.id]">

要使用按钮切换组,请使用此

<button ng-click="accordionGroups.title1 = !accordionGroups.title1">Toggle title1</button>

Plunker