Question

我是角色新手，只是用搜索过滤器创建了一个角度树...它加载嵌套数据然后以树形式获取。

我希望过滤器也适用于子节点，即使它与父节点不匹配，所以一旦我使用过滤器，即使输入与父节点不匹配，子节点仍会显示。

感谢KayakDave，我纠正了我的愚蠢问题

plnkr：http://plnkr.co/edit/5l7sFw?p=preview

代码：

    app.directive('angularTree', function() {
    return {
        restrict: 'E',
        scope: {
            treeData: '='
        },
        templateUrl: 'tree.html',
        link: function(scope, element, attrs) {
            // Some tree logic here
            // after done, pass data to directive
            scope.tree_data = scope.treeData;

            // Filter
            scope.tree_filter = function(obj) {
                // Filter here
            };
        }
    }
})
//ul inside tree
    .directive('treeBody', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                tree: '=',
                treeFilter: '='
            },
            template: '<ul class="tree"><node ng-repeat="node in tree | filter:treeFilter" child-filter="treeFilter" node="node"></node></ul>'
        }
    })
// li & child
    .directive('node', function($compile) {
        return {
            ......
            scope: {
                node: '=',
                childFilter: '='
            },
            template: '<li>{{node.name}}</a></li>',
            link: function(scope, element, attrs) {
                var childTem = '<tree-body tree="node.children" tree-filter="childFilter"></tree-body>';
                // Append child
                   .......
                }
            }
        }
    })

Answer 1

由于您希望父母在其任何子项可见时可见 - 一种选择是向树中的每个节点添加属性（类似于ngRepeat添加$$hashKey的方式），指示是否节点与测试匹配，是否可见。我将在下面的代码中将该属性称为show。

然后，搜索完成后，将设置每个节点的show属性。然后，父母可以检查他们所有的孩子，看看他们是否有可见。

我们可以依靠$digest的脏检查来确保在确定父母最终可见度之前正确设置所有孩子。

如果任何子项的show属性设置为true，则此递归函数返回true。

function checkChildren(nextl) {
     var i, showNode=false;
     if (nextl) {
        for (i = 0;i < nextl.length;i++) 
           showNode |= nextl[i].show | checkChildren(nextl[i].children);
     }
     return showNode;
}

在过滤器中，我们根据每个节点是否与过滤器匹配来标记每个节点，如果节点匹配或者其中任何一个子节点匹配，则返回true：

// Filter
scope.tree_filter = function(obj) {
  var reg = new RegExp(scope.search, 'i');
  var showNode = !scope.search || reg.test(obj.name);

  obj.show = showNode;
  return (showNode | checkChildren(obj.children)) ;
};

updated fiddle

angularjs应用过滤器交叉嵌套指令（过滤器也适用于子项，即使它与父项不匹配）？

1 个答案: