2

I am trying to have a filter on a tree, that will expand a parent node if it's child node is a match. Currently, if all nodes are expanded, the filter will act correctly. As soon as all nodes are collapsed, the filter has no functionality.

For example, with all nodes expanded, if I type, say Kevin, then only the associated parent nodes will be expanded, all others will be collapsed. On the other hand, with all nodes collapsed, if I type Kevin, then no nodes get expanded.

BUT! here is the kicker; if I were to type 'kevv', the result is no nodes expanded. On removing the second 'v', the kevin node is then expanded along with all associated parent nodes.

I through this plunk together just to demonstrate the functionality behind my real app so I apologize for the lack of styling.

Here is my Plunk

<ul ui-tree-nodes="" ng-model="data">
    <li ng-repeat="item in data" ui-tree-node="" collapsed="!treeFilter(item, pattern, supportedFields)" ng-include="(item.items) ? 'parent_items_renderer' : 'terminal_item_renderer' "></li>
</ul>
<script type="text/ng-template" id="parent_items_renderer">
<div ui-tree-handle class="tree-node tree-node-content">
  <a href="">
    <div class="" ng-if="item.items" data-nodrag ng-click="toggle(this)">
      <span class="glyphicon" ng-class="{
              'glyphicon-chevron-right closed': collapsed,
              'glyphicon-chevron-down open': !collapsed}">
          </span>
     <span class="" ng-bind-html="item.title | highlight:pattern | trust"> {{item.title}}</span>
    </div>
  </a>
</div>
<ul ui-tree-nodes ng-model="item.items" ng-class="{hidden: collapsed}" >
  <li ng-repeat="item in item.items"  ui-tree-node  ng-init="collapse()" collapsed="!treeFilter(item, pattern, supportedFields)"  ng-include="(item.items) ? 'parent_items_renderer' :  'terminal_item_renderer' "> </li>
</ul>
</script>
<script type="text/ng-template" id="terminal_item_renderer">
<div ui-tree-handle class="tree-node tree-node-content">
  <a href="">
    <span></span>
    <div ng-if="!item.items" class="item outcome">
      <span ng-bind-html="item.title | highlight:pattern | trust ">{{item.title}}</span>
    </div>
  </a>
</div>
TLenahan14
  • 31
  • 3

0 Answers0