How do I split Angular UI Bootstrap accordions into multiple columns?

Question

I am trying to split accordion directives into multiple columns. This is what I have so far:

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

Right now, it displays the accordions in a line straight down the page, like so:

Acc1
Acc2
Acc3
Acc4
Acc5
Acc6

I would like it to be split up like so into N columns (3 in this case):

Acc1    Acc2    Acc3
Acc4    Acc5    Acc6

Right now I am looking at a filter approach, but I am curious if there is a better way.

The controller logic right now is essentially limited to populating $scope.dimensions.

Here is a plunker showing the basics

possible duplicate of [how to split the ng-repeat data with three columns using bootstrap](http://stackoverflow.com/questions/21644493/how-to-split-the-ng-repeat-data-with-three-columns-using-bootstrap) — Codeman, Mar 13 '15 at 18:42

New Dev · Accepted Answer · 2015-03-13T19:33:59.777

Well, one "cheap" (implementation-wise) way to achieve is by filtering the index with mod 3, and using 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

The better approach would be to pre-prepare the dimensions array into the proper form first.

This is actually exactly what I ended up doing :) – Codeman Mar 13 '15 at 20:16 — Codeman, Mar 13 '15 at 20:16

How do I split Angular UI Bootstrap accordions into multiple columns?

1 Answers1