用递归按id将集合对象排序为指令

Question

我在这里检查了一些关于递归指令的帖子，但似乎没有一个适合我。

基本上，我的情况如下：

具有如下对象集合：

 [
     {id: 1, parentid:null, text: 'something 1'},
     {id: 2, parentid:null, text: 'something 2'},
     {id: 3, parentid:1, text: 'something 3'},
     {id: 4, parentid:1, text: 'something 4'},
     {id: 5, parentid:2, text: 'something 5'},
     {id: 6, parentid:3, text: 'something 6'},
     {id: 7, parentid:4, text: 'something 7'},
     {id: 8, parentid:5, text: 'something 8'}
 ]

当然还有更多的键，但是需要这些键来放置逻辑。

基本上，我是这样做的：

 <ul>
    <li>Parent id: n
        <ul>
           <li>Children of n</il>
    </li>
 </ul>

所以我的第一个猜测是，我需要一个指令，在每次有孩子出现的时候，我需要一个类似的版本，但是我知道如何攻击它。我只是需要一个未知数的传承指的是孩子的上层。

有什么办法或模式改造来面对这个问题吗？

Answer 1

我认为最简单的方法是首先将数据组织成这样的层次结构：

[
    {
        id: 1, 
        parentid:null, 
        text: 'something 1',
        children: [
            {id: 3, parentid:1, text: 'something 3'},
            {id: 4, parentid:1, text: 'something 4'},
        ]
    },
    {
        id: 2, 
        parentid:null, 
        text: 'something 2',
        children: [
            {id: 5, parentid:2, text: 'something 5'}
        ]
    },
]

然后，使用ng-重复和嵌套的ng-重复呈现是非常明显的。

如果您在这个层次结构中有更多的级别，那么考虑某种类型的递归可能是一个解决方案。

编辑：

最简单的方法是为呈现对象的目的重新组织数据，其中索引(属性名称)是is，值是带有此节点子节点的数组。然后，要获得每个id的子级，您可以通过dictVar[parentId]获得它们。

数据转换相当简单，可以通过各种方式进行，例如：

var dataDict = {};
angular.forEach(data, function (item) {
  var id = item.parentid || 0;
  var items = $scope.dataDict[id] || [];
  items.push(item);
  dataDict[id] = items;
});

在此之后，在dataDict中，您有：

{
  "0": [
    {"id": 1, "parentid": null, "text": "something 1"},
    {"id": 2, "parentid": null, "text": "something 2"}
  ],
  "1": [
    {"id": 3, "parentid": 1, "text": "something 3"},
    {"id": 4, "parentid": 1, "text": "something 4"}
  ],
  "2": [
    {"id": 5, "parentid": 2, "text": "something 5"}
  ],
  "3": [
    {"id": 6, "parentid": 3, "text": "something 6"}
  ],
  "4": [
    {"id": 7, "parentid": 4, "text": "something 7"}
  ],
  "5": [
    {"id": 8, "parentid": 5, "text": "something 8"}
  ]
}

您可以这样离开它，或者进一步转换它，以获得完全的层次结构。

然后，要呈现列表，可以使用这里描述的技术：http://sporto.github.io/blog/2013/06/24/nested-recursive-directives-in-angular/