angularjs – 与父值匹配的Angular嵌套ng-repeat过滤器项

我传递了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>

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

有几种方法可以做到这一点……你可以创建一个只返回孩子的函数
$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">

相关文章

AngularJS 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...