如何将 Angular UI 引导手风琴拆分为多列

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

本文关键字：拆分 手风琴 Angular UI      更新时间：2023-09-26

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

<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

好吧，一种"便宜"（实现方面）的方法是使用 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>

普伦克

更好的方法是先将dimensions数组预先准备成正确的形式。

相关文章：