使用 Bootstrap Grid System 在 AngularJS 中显示垂直堆叠的数据

Question

我一直在尝试使用 AngularJS 和 Bootstrap 来创建一种显示分层数据的方法。在你们 stackoverflowers 的帮助下，我构建了一个很好的滑动效果，用于使用引导标记显示类别和子类别。

这是一个 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 三时，它会在其下方打开第一列中的子类别。任何溢出都应在其他列之间进行划分。

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

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

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

在其中，我使用引导程序 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>

您知道还有另一种可行的方法吗？引导网格系统永远不会适用于这种类型的数据吗？非常感谢所有帮助....

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 中删除引导网格的内容：

<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

Answer 2

仅当列宽为 200 像素时，上述解决方案才有效。对于相同数量的列和列宽 600 像素，它不起作用。