Как расколоть гармонические 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 в правильную форму.