如何将 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

好吧，一种 "cheap"（实现方式）实现的方法是使用 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 数组预先准备成正确的形式。

如何将 Angular UI Bootstrap 手风琴分成多列？

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

javascript

accordion

angularjs

angular-ui-bootstrap