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

我尝试使用orderBy但无法获得所需的输出。

Answer 1

要输出这样的（两级）树，只需将orderBy谓词表达式作为数组提供：

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

这意味着：

如果前者为0，则第一个排序条件为parentId或id。使用此技巧，子项和父项将在输出中分组...
...但是，当你1）仍然需要将父母置于孩子之上，并且2）自己订购孩子时，应该有第二个标准 - 仅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线性映射到它在源数组中的位置。否则，您必须在每个步骤中查找它，或者实现索引;两种方式都很麻烦。

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

1 个答案: