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'和三元运算符，当我们引入'父和子'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

以下是结果的快照：

Answer 2

您的数据结构目前不是分层的。我会为你的类别列表建议一个这样的结构（可能是一个更好的名字），其中数组中的每个元素都有一个数组＆＃34; children＆＃34;作为财产。

$scope.categories = [
  {category_name:"apples", children: [
    {category_name:"bramble", children: [
      {category_name:"red"},
      {category_name:"green"}
    ]},
    {category_name:"granny smiths"},
    {category_name:"pink lady"}
  ]},
  {category_name:"oranges", children: [
    {category_name:"satsuma"},
    {category_name:"nectarine"},
    {category_name:"mandarin"}
  ]}
];

这是表示这种效率低效方法的plunkr（模板和指令是一种更有效的方法来处理递归方面而不是手动操作）。