1

I'm using angular-ui-tree-filter library to create a filter in my treeview. According to the example here: http://ee.github.io/angular-ui-tree-filter/ you can choose by a checkbox to dim the filter results. I tried but i can dim only the root items. The sub nodes not. I followed the example but i was not able to do it.. I made a Plunker here: http://plnkr.co/edit/mjyWRYV39EDEKK0XRuuW?p=preview

this is the main part of html code by the way:

<div ui-tree="" data-drag-enabled="false" id="tree-root">
      <button ng-click="expandAll()">Expand All</button>    
      <button ng-click="collapseAll()">Collapse All</button>
      <ul ui-tree-nodes="" ng-model="data">
        <li ng-repeat="item in data" ui-tree-node="" 
        ng-hide="pattern && !treeFilter(item, pattern, supportedFields) && !dim" 
        ng-include="(item.items) ? 'parent_items_renderer' : 'terminal_item_renderer' "></li>
      </ul>
    </div>
    </div>
    <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="pattern && !treeFilter(item, pattern, supportedFields) && !dim" 
       ng-class="{'filtered-out': pattern && !treeFilter(node, pattern, supportedFields) && dim}"
      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>
  </script>
Atlas91
  • 5,754
  • 17
  • 69
  • 141

0 Answers0