AngularJS使用ng-repeat显示层次数据

Question

因此，我一直在尝试构建一种很好的方式来表示应用程序中的分层数据。我为一些引导徽章创建了幻灯片效果，这些引导徽章用于使用AngularJS显示一些子类别。

我已经创建了以下示例（在您的stackoverflow-ers的帮助下！），该示例适用于父和子类型的数据。即。您不能同时成为父母和孩子，这是我的真实示例。

  <ul>
    <li ng-repeat="category in categories"
        ng-init="isChild = category.category_type == 'child'"
        ng-show="category.category_show"
        class="badge-slider">

      <span class="badge {{ isChild ? 'badge-c' : 'badge-p' }}"
            ng-click="isChild || updateResults(category)"
            ng-bind="category.category_name">
      </span>

    </li>
  </ul>

我正在努力了解更改代码的最佳方法是什么，以便它能够用于其他“父级和子级” category_type。创建浏览目录结构的方式需要此“父级和子级” category_type。

在上面的示例中，它依赖于布尔值'isChild'和三元运算符，当我们引入'parent and child'category_type时，该运算符不起作用。

任何人有任何想法吗？

以下是指向PLNKR的链接，该链接演示了用于简化父子关系的滑动功能：http : //plnkr.co/edit/9CiXW1YAoPj80x6PtBW3

编辑1：

我创建了另一个PLNKR来处理层次关系的3层性质。它可以正常工作，只是它不显示带有相应徽章的“父项和子项”元素。... http : //plnkr.co/edit/YoRI578GHE91t6torCUt

Answer 1

我是这样解决这个问题的：

1. 修改后的categories数据结构
2. 在 html 文件中创建内联角度模板
3. 为“父子”元素创建新的 CSS 类

您可以查看正在运行的Plunker

这是结果的快照：