如何將Angular UI Bootstrap手風琴分爲多列？

Question

我想將手風琴指令分成多列。這是我到目前爲止有：

<accordion> 
    <accordion-group ng-repeat="d in dimensions" heading="{{d.name}}"> 
     {{d.description}} 
    </accordion-group> 
</accordion> 

眼下，它顯示在一行中的手風琴直降的頁面，就像這樣：

Acc1 
Acc2 
Acc3 
Acc4 
Acc5 
Acc6 

我想它，像這樣被分開到N列（在這種情況下是3列）：

Acc1 Acc2 Acc3 
Acc4 Acc5 Acc6 

現在我正在尋找一種過濾方法，但我很好奇是否有更好的方法。

控制器邏輯現在基本上僅限於填充$scope.dimensions。

Here is a plunker showing the basics

Answer 1

那麼，一個 「便宜」（執行明智）的方式實現是通過mod 3過濾指標，並使用class="col-*-4"：

<div class="row"> 
    <accordion> 
    <div class="col-xs-4"> 
     <accordion-group heading="{{d.name}}" ng-repeat="d in dimensions" 
         ng-if="$index % 3 === 0"> 
     {{d.description}} 
     </accordion-group> 
    </div> 

    <div class="col-xs-4"> 
     <accordion-group heading="{{d.name}}" ng-repeat="d in dimensions" 
         ng-if="$index % 3 === 1"> 
     {{d.description}} 
     </accordion-group> 
    </div> 

    <div class="col-xs-4"> 
     <accordion-group heading="{{d.name}}" ng-repeat="d in dimensions" 
         ng-if="$index % 3 === 2"> 
     {{d.description}} 
     </accordion-group> 
    </div> 
    </accordion> 
</div> 

plunker

更好的方法將首先將dimensions陣列預先準備好成適當的形式。