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

I am passing in 2 arrays to my view. I would like my nested loop to only display where it's parent_id value matches the parent.id. Eg.

我正在向我的视图传递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>

Is this possible/best practice in angular of should I be filtering the object in node before passing it into angular? Thank you!

这是角度中的可能/最佳实践吗？我应该在将节点传递给角度之前过滤节点中的对象吗？谢谢！

3 个解决方案

#1

There are a couple of ways you could do it... You could create a function to return just the children:

有几种方法可以做到这一点......你可以创建一个只返回孩子的函数：

$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:

HTML：

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

You could define a filter to do the same thing:

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

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:

HTML：

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

Both of those methods will execute every digest cycle though. If you have a large list of elements you would definitely want to improve performance. I think the best way would be to pre-process those results when you get them, adding a children array to each object in arr1 with only its children (here using array.filter instead of for loop and array.forEach):

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

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

Then in the html you are already working with the parent so you can repeat over its children property:

然后在html中你已经在使用父级了，所以你可以重复它的子属性：

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

#2

Instead of using filters, data-ng-if can achieve the same result.

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>

#3

The solution depends on how often arrays are changed and how big arrays are.

解决方案取决于阵列的更改频率和阵列的大小。

The fist solution is to use filter. But in this case it would be called at least twice (to make sure that result is "stabilized" - selected same elements).

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

Other solution is to $watch by yourself original array and prepare "view" version of it injecting children there. Personally I would prefer the second as more explicit.

其他解决方案是$ watch自己观看原始数组并准备“注视”版本，在那里注入儿童。我个人更喜欢第二个更明确。

However if you can reuse "find-the0child" filter in other parts of your application you can go with first one - AngularJS will re-run filter only after original array modified.

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

If needed I can provide here an example of implementation of one of these options - add the comment to answer.

如果需要，我可以在这里提供其中一个选项的实现示例 - 添加注释以回答。