我一直在尝试使用 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 网格系统永远不会为这种类型的数据工作吗？非常感谢所有帮助....
最佳答案
按照 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
关于javascript - 使用 Bootstrap 网格系统在 AngularJS 中显示垂直堆叠的数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32096495/