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

Using Bootstrap Grid System to display Vertically stacked data in AngularJS

本文关键字：垂直 显示 数据 系统 Grid AngularJS Bootstrap      更新时间：2023-09-26

我一直在尝试使用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
例如，当单击category-3时，它会在下面的第一列中打开它的子类别。任何溢出都应该分配给其他列。

Ie。如果通过单击category-3打开了10个子类别，那么应该向网格中添加额外的3行，将类别从第一列移动到第二列，以此类推，直到所有内容看起来平衡。

我还想用于显示响应数据的列数…ie。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>

你知道还有其他有效的方法吗?难道自举式网格系统永远无法处理这种类型的数据吗?非常感谢所有的帮助....

按照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

上述解决方案仅在列宽为200px时有效。对于相同数量的列和列宽度600px，它不工作。

相关文章：