angularjs – 与父值匹配的Angular嵌套ng-repeat过滤器项
发布时间:2020-12-17 09:28:36 所属栏目:安全 来源:网络整理
导读:我传递了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
我传递了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"> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |