如何將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 。

這是一個顯示基礎知識的plunker

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陣列預先准備好。