与父值匹配的角度嵌套 ng-repeat 过滤器项目

Question

我将 2 个数组传递给我的视图。我希望我的嵌套循环仅显示它的 parent_id 值与 parent.id 匹配的位置。例如。

arr1 = {"0":{"id":326,"parent_id":0,"title":"Mellow Mushroom voucher","full_name":"Patrick","message":"The voucher says $10 Voucher; some wording on the printout says, \"This voucher is valid for $20 Pizza\" but my purchase price or amount paid also says $20. Shouldn't that be $10","type":"Deals"}};
arr2 = {"0":{"id":327,"parent_id":326,"title":"Re: Mellow Mushroom voucher","full_name":"Patrick Williams","message":"Some message here","type":null};

...
<div data-ng-repeat = "parent in arr1">
<span>{{parent.title}}<span>
    <div data-ng-repeat="child in arr2 | only-show-where-child.parent_id == parent.id">
        <li>{{child.body}}</li>
    </div>
</div>

在将它传递给角度之前，我应该在节点中过滤对象吗？谢谢！

Answer 1

解决方案取决于数组的更改频率和数组的大小。

第一个解决方案是使用过滤器。但在这种情况下，它至少会被调用两次（以确保结果是“稳定的” - 选择相同的元素）。

其他解决方案是 $watch 自己原始数组并准备它的“查看”版本在那里注入孩子。就个人而言，我更喜欢第二个更明确的。

但是，如果您可以在应用程序的其他部分重用“find-the0child”过滤器，您可以使用第一个过滤器 - AngularJS 只会在修改原始数组后重新运行过滤器。

如果需要，我可以在此处提供这些选项之一的实施示例 - 添加评论以回答。

Answer 2

不用过滤器，data-ng-if 可以达到同样的效果。

<div data-ng-repeat="parent in arr1">
  <span>{{parent.title}}<span>
  <div data-ng-repeat="child in arr2" data-ng-if="child.parent_id == parent.id">
    <li>{{child.body}}</li>
  </div>
</div>

Answer 3

有几种方法可以做到...您可以创建一个函数来仅返回子项：

$scope.getChildren = function(parent) {
  var children = [];
  for (var i = 0; i < arr2.length; i++) {
    if (arr2[i].parent_id == parent.id) {
      children.push(arr2[i]);
    }
  }
  return children;
};

html:

<div ng-repeat="child in getChildren(parent)">

你可以定义一个过滤器来做同样的事情：

myApp.filter('children', function() {
  return function(input, parent) {
    var children = [];
    for (var i = 0; i < input.length; i++) {
      if (input[i].parent_id == parent.id) {
        children.push(input[i]);
      }
    }
    return children;
  };
});

html:

<div ng-repeat="child in arr2|children:parent">

不过，这两种方法都会执行每个摘要循环。如果您有大量元素，您肯定希望提高性能。我认为最好的方法是在获得这些结果时对其进行预处理，向 arr1 中的每个对象添加一个子数组，其中只有它的子对象（这里使用 array.filter 而不是 for 循环和 array.forEach）：

arr1.forEach(function(parent) {
  parent.children = arr2.filter(function(value) {
    return value.parent_id === parent.id;
  };
});

然后在 html 中，您已经在使用父级，因此您可以重复其子级属性：

<div ng-repeat="child in parent.children">