具有唯一节点的可折叠侧面选项

Question

我正在尝试在我的网络应用中获得可折叠的产品类别部分（基于AngularJS）。

我的JSON数组如下：

[
  {
    "Categoryid": "M60001",
    "productPrimaryCategory": "Living Room",
    "productClass":"Furniture",
    "productSubCategory":"Sofa & Sectionals",
    "productType":"Single Seater",
    "Active":"Yes"
  },
 {
    "Categoryid": "M60002",
    "productPrimaryCategory": "Living Room",
    "productClass":"Furniture",
    "productSubCategory":"Sofa & Sectionals",
    "productType":"2 Seater",
    "Active":"Yes"
  },
   {
    "Categoryid": "M60003",
    "productPrimaryCategory": "Living Room",
    "productClass":"Furniture",
    "productSubCategory":"Sofa & Sectionals",
    "productType":"3 Seater",
    "Active":"Yes"
  }..
]

我正在努力将JSON中的所有主要类别作为一个具有多个子节点的节点（确保每个类型只有一个主要类别节点。每种类型一个节点）。

我希望检查是否有任何AngularJS或jQuery插件来实现类似的功能，因为我相信我所寻找的并不是唯一的，而是常见的。

目前我还没有开始编写这部分代码，因为我正在寻找一个现有的解决方案，但很快会与一些代码共享一个JSFiddle。

我检查了AngularJS-ui-tree，但找不到任何类似于我的例子。

以下是我对结果的期望：

Answer 1

您可以使用UI BOOTSTRAP实现此目的，或使用ngShow / ngHide手动执行此操作，并为数组元素添加一些“可见”属性

Answer 2

您可以使用Bootstrap。

在此示例中，我使用了Dropdown。

<div class="dropdown">

您可以在json中使用ng-repeat

多次重复此元素

并在下拉列表中使用这些元素的属性。

Demo

当然，这只是一个想法。

Answer 3

我无法找到插入式解决方案。所以我创造了自己的东西。以下是内容链接：

Chaining directive within directive in angularjs

虽然jsfiddle仍然不完整..但是有一个良好的开端..一旦我有一段时间我会完成它。