javascript - 使用 Bootstrap 网格系统在 AngularJS 中显示垂直堆叠的数据

Question

我一直在尝试使用 AngularJS 和 Bootstrap 来创建一种显示分层数据的方法。在各位 stackoverflowers 的帮助下，我构建了一个很好的滑动效果，用于使用 bootstrap 徽章显示类别和子类别。

这是一个 PLNKR，展示了它的工作原理:http://plnkr.co/edit/5I1pU0TZo6AjHJTbBuG9

在那个例子中，我们有两个主要类别:水果和蔬菜

当我尝试扩展类别数量时，问题就开始了。在现实世界中，我可能会有大约 100 个主要类别，用户会想使用这些类别来尝试找到更具体的子类别。

首先让我描述一下我希望显示类别的最终方式，以及它们在单击时如何交互。类别应按垂直顺序显示，如下所示:

category-1          category-26          category-51        category-76
category-2          category-27          category-52        category-77
category-3          category-28          category-53        category-78
    .                   .                    .                  .
    .                   .                    .                  .
    .                   .                    .                  .
category-24          category-49          category-74       category-99
category-25          category-50          category-75       category-100

例如，当单击类别 3 时，会在其下方的第一列中打开它的子​​类别。任何溢出都应在其他列之间分配。

即。例如，如果有 10 个子类别通过单击类别 3 打开，则应向网格添加 3 个额外的行，类别从第一列移动到第二列，依此类推，直到一切看起来平衡。

我还希望用于显示数据的列数能够响应...即。比方说，手机上有 2 列，平板电脑上有 3 列，台式机上有 4 列。

现在，我设置了一个非常丑陋的 PLNKR，它显示了我的第一个非常令人失望的版本:http://plnkr.co/edit/jeVxDKp268WlQWzhSQU8

在其中，我使用 Bootstrap col-xs-6 和 col-md-3 类来帮助将数据放入网格中。它基本上完全符合我的要求 - 除了它水平堆叠所有元素而不是垂直堆叠......

明确地说，类别以以下无用的方式显示:

category-1          category-2          category-3        category-4
category-5          category-6          category-7        category-8
category-9          category-10         category-11       category-12
    .                   .                    .                  .
    .                   .                    .                  .
    .                   .                    .                  .
category-93         category-94         category-95       category-96
category-97         category-98         category-99       category-100

更糟糕的是，当您单击一个类别时，子类别也以这种方式显示，因此所有缩进都应用于子类别以帮助用户直观地了解树下的位置，仅令人困惑!

这是我用来显示类别的 html:

<ul id="categoriesUnorderedList">
    <li ng-repeat="category in categories"
        ng-show="category.category_show"
        class="badge-slider col-xs-6 col-md-3">
        <span ng-click="categoryClicked(category)"
            class="badge {{ getBadgeClassName(category.category_type) }}"
            ng-style="getIndent(category)">
            {{category.category_name}}
        </span>
    </li>
</ul>

您知道还有其他有效的方法吗？ Bootstrap 网格系统永远不会为这种类型的数据工作吗？非常感谢所有帮助....

Answer 1

按照 charlietfl 的建议，我使用了 css3 列来完成这个技巧。

所需的 css 代码是:

ul {
-webkit-column-width: 200px;
-moz-column-width: 200px;
-o-column-width: 200px;
column-width: 200px;

-webkit-column-count: 4;
-moz-column-count: 4;
-o-column-count: 4;
column-count: 4;

list-style-type: none;

我还需要从 html 中删除 Bootstrap 网格内容:

<ul id="categoriesUnorderedList">
    <li ng-repeat="category in categories" ng-show="category.category_show" class="badge-slider">
        <span ng-click="categoryClicked(category)" class="badge {{ getBadgeClassName(category.category_type) }}" ng-style="getIndent(category)">
          {{category.category_name}}
        </span>
    </li>
</ul>

这是工作 PLNKR:http://plnkr.co/edit/blKAUiUT2Ql0HGMCrJb1