AngularJS按树结构上的属性过滤对象

Question

我发布这个是因为我从来没有找到过滤嵌套对象(树结构)的精确答案.

假设我们有一个JSON树结构,如下所示:

$scope.tree = [{
    id: 1,
    parent_id: 0,
    name: 'Root Item',
    items: [
              {
               id: 2, 
               parent_id: 1, 
               name: '1st Child of 1'
              },
              {
               id: 3, 
               parent_id: 1, 
               name: '2nd Child of 1'
              },
              {
               id: 4, 
               parent_id: 1, 
               name: '3rd Child of 1',
               items:[
                   {
                    id:5, 
                    parent_id: 4, 
                    name:'1st Child of 5'
                    },
                   {
                    id:6, 
                    parent_id: 4, 
                    name:'2nd Child of 5'
                    }
               ]}
           ]
    }]

我们如何使用过滤器遍历树以获取id为6的对象？

Answer 1

如果我们使用以下过滤器,例如:

<div data-ng-init="selectedItem = (tree | filter:{id:6})">
  <h1>The name of item with id:6 is selectedItem.name</h1>
</div>

它只会迭代第一级,其中只能找到id:1.因此,为了获得嵌套的级别对象,我们必须使用像这样的递归过滤器:

angular.module("myApp",[])
   .filter("filterTree",function(){
       return function(items,id){
          var filtered = [];
          var recursiveFilter = function(items,id){
              angular.forEach(items,function(item){
                 if(item.id === id){
                    filtered.push(item);
                 }
                 if(angular.isArray(item.items) && item.items.length > 0){
                    recursiveFilter(item.items,id);              
                 }
              });
          };
          recursiveFilter(items,id);
          return filtered;
       }; 
    });
});

因此,要在标记中使用此过滤器,您可以这样称呼它:

<div data-ng-init="selectedItem = (tree | filterTree:6)">
  <h1>The name of item with id:6 is selectedItem.name</h1>
</div>

希望你觉得这很有用,我花了一些时间来消化递归过滤器.

当然,这个过滤器可以获得1个项目,因为它返回[0]过滤数组的第一个对象.但是如果你想让它返回超过1个结果,你必须在返回函数中只删除那个[0],然后使用ng-repeat来迭代过滤后的resutls.