javascript - 如何将Angular UI Bootstrap Accordion 拆分为多列？

我正在尝试将 Accordion 指令拆分为多列。这是我到目前为止所拥有的:

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

现在，它将 Accordion 在页面的正下方显示为一行，如下所示:

Acc1
Acc2
Acc3
Acc4
Acc5
Acc6

我希望将其拆分为N列(在这种情况下为3列):

Acc1    Acc2    Acc3
Acc4    Acc5    Acc6

目前，我正在寻找一种过滤方法，但是我好奇是否有更好的方法。

现在， Controller 逻辑实际上仅限于填充$scope.dimensions。

Here is a plunker showing the basics

最佳答案

好吧，一种“便宜”(在实现方式上)的实现方法是使用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数组预先准备为适当的形式。

关于javascript - 如何将Angular UI Bootstrap Accordion 拆分为多列？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29039387/