2

子ノードが一致する場合、親ノードを展開するツリーにフィルターを設定しようとしています。現在、すべてのノードが展開されている場合、フィルターは正しく機能します。すべてのノードが折りたたまれるとすぐに、フィルターは機能しなくなります。

たとえば、すべてのノードが展開されている状態で、Kevin と入力すると、関連する親ノードのみが展開され、他のすべてのノードは折りたたまれます。一方、すべてのノードが折りたたまれている状態で、Kevin と入力すると、ノードは展開されません。

しかし!これがキッカーです。「kevv」と入力すると、ノードが展開されません。2 番目の 'v' を削除すると、ケビン ノードは関連するすべての親ノードと共に展開されます。

実際のアプリの背後にある機能をデモンストレーションするためだけに、この 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>
4

0 に答える 0