Question

我一直在尝试使用AngularJS和Bootstrap创建一种显示分层数据的方法。在你的堆栈花的帮助下，我建立了一个很好的滑动效果，用于使用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三时，在它下面打开第一列中的子类别。任何溢出都应该在其他列之间分配。

IE中。如果通过单击类别3打开了10个子类别，那么应该在网格中添加3个额外的行，类别从第一列移到第二列，依此类推，直到所有内容看起来均衡。< / p>

我还想用于显示数据响应的列数...即。电话上有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>

您知道其他方法有效吗？引导网格系统永远不会适用于这种类型的数据吗？所有人都非常感谢....

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

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

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

2 个答案: