如何订购父子层次结构中Angularjs

Question

这是我的数据：

$scope.data = [{ 
     id: 1, 
     group: 'Parent Comment 1', 
     pid: 0 
    }, { 
     id: 2, 
     group: 'Parent Comment 2', 
     pid: 0 
    }, { 
     id: 3, 
     group: 'Child 1 P1', 
     pid: 1 
    }, { 
     id: 4, 
     group: 'Child 1 P2', 
     pid: 2 
    }, { 
     id: 5, 
     group: 'Parent Comment 3', 
     pid: 0 
    }]; 

我想如下输出：

ParentComment 1 
Child 1 P1 
Parent Comment 2 
Child 1 P2 
Parent Comment 3 

我试着使用排序依据，但无法获得所需的输出。

Answer 1

要输出这样的（两电平）树，只需提供一个ORDERBY谓词表达式作为数组：

['pid || id', 'id'] 

这意味着以下内容：

• 第一排序标准将或者parentId或id，如果前者为0.有了这个把戏，孩子和父母会分组在输出...
• ...但是，因为你1）仍然需要把父母放在孩子以上，2） order ch孩子们自己，应该有第二个标准 - id一个人。

换句话说，你ng-repeat看起来如下：

<tr ng-repeat="record in data | orderBy:['pid || id', 'id']"> 
    <td>{{record.group}}</td> 
</tr> 

Plunkr。

---

如果您需要处理更复杂的层次结构，它可能会更好，使每个父评论包含所有孩子的意见重新组织你的数据。不过，这是可以实现的现有结构也断言：

$scope.predicate = function(el) { 
    var res = []; 
    while (el.pid) { 
    res.unshift(el.id); 
    el = $scope.data[el.pid - 1]; 
    } 
    res.unshift(el.id); 
    return res; 
}; 

... 
<tr ng-repeat="record in data | orderBy:predicate">... 

...但有一个问题：在这段代码中，我假设元素的id线性映射为它的位置源数组中。否则，你将不得不在每步步，或实现一个索引;两种方式都很麻烦。