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

嗯，一个＆＃34;便宜＆＃34; （实现方式）实现的方法是使用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手风琴分成多个列？

1 个答案: