フィルタリングされたノードを展開していないAngularJSフィルタ

Question

私はhttps://github.com/tchatel/angular-treeRepeatを使用しており、拡張していないノードをフィルタリングしようとしています。

treeRepeat.html：だから私はAngularJSのフィルタを含めるには、このコードを変更した

これは、ツリーのすべてのノードが展開されている場合は期待どおりに動作

<p id="expand-collapse-all"> 
    <a href="" ng-click="expandAll()">Expand all</a> 
    <a href="" ng-click="collapseAll()">Collapse all</a> 
</p> 


Filter : <input ng-model="myFilter" type="text"> 

<ul frang-tree> 
    <li frang-tree-repeat="node in treeData | filter:myFilter"> 
     <div><span class="icon" 
       ng-class="{collapsed: node.collapsed, expanded: !node.collapsed}" 
       ng-show="node.children && node.children.length > 0" 
       ng-click="node.collapsed = !node.collapsed"></span> 
      <span class="label" 
       ng-class="{folder: node.children && node.children.length > 0}" 
       ng-bind="node.label" 
       ng-click="action(node)"></span> 
     </div> 
     <ul ng-if="!node.collapsed && node.children && node.children.length > 0" 
      frang-tree-insert-children="node.children | filter:myFilter"></ul> 
    </li> 
</ul> 

： ライン20をcontrollers.js上：

$scope.treeData = JSON.parse("[ { \"label\": \"root\", \"children\": [ { \"label\": \"folder A\", \"collapsed\": true, \"children\": [ { \"label\": \"folder B\", \"collapsed\": true, \"children\": [ { \"label\": \"file B1\", \"collapsed\": true }, { \"label\": \"file B2\", \"collapsed\": true } ] }, { \"label\": \"file A1\", \"collapsed\": true }, { \"label\": \"file A2\", \"collapsed\": true }, { \"label\": \"file A3\", \"collapsed\": true }, { \"label\": \"file A4\", \"collapsed\": true } ] }, { \"label\": \"folder C\", \"collapsed\": true, \"children\": [ { \"label\": \"folder D\", \"collapsed\": true, \"children\": [ { \"label\": \"folder E\", \"collapsed\": true, \"children\": [ { \"label\": \"file E1\", \"collapsed\": true }, { \"label\": \"file E2\", \"collapsed\": true }, { \"label\": \"file E3\", \"collapsed\": true } ] } ] }, { \"label\": \"folder F\", \"collapsed\": true, \"children\": [ { \"label\": \"file F1\", \"collapsed\": true }, { \"label\": \"file F2\", \"collapsed\": true } ] }, { \"label\": \"file C1\", \"collapsed\": true } ] }, { \"label\": \"folder G\", \"collapsed\": true, \"children\": [ { \"label\": \"file G1\", \"collapsed\": true }, { \"label\": \"file G2\", \"collapsed\": true }, { \"label\": \"file G3\", \"collapsed\": true }, { \"label\": \"file G4\", \"collapsed\": true } ] }, { \"label\": \"folder H\", \"collapsed\": true, \"children\": [ { \"label\": \"file H1\", \"collapsed\": true }, { \"label\": \"file H2\", \"collapsed\": true }, { \"label\": \"file H3\", \"collapsed\": true } ] } ] } ]"); 

ノードが折りたたまれている場合、一致したノードは拡大/表示可能です。木は崩壊したままです。折りたたまれたノードのための設定：controllers.js上 ライン21：

$scope.treeData = JSON.parse("[ { \"label\": \"root\", \"children\": [ { \"label\": \"folder A\", \"collapsed\": true, \"children\": [ { \"label\": \"folder B\", \"collapsed\": true, \"children\": [ { \"label\": \"file B1\", \"collapsed\": true }, { \"label\": \"file B2\", \"collapsed\": true } ] }, { \"label\": \"file A1\", \"collapsed\": true }, { \"label\": \"file A2\", \"collapsed\": true }, { \"label\": \"file A3\", \"collapsed\": true }, { \"label\": \"file A4\", \"collapsed\": true } ] }, { \"label\": \"folder C\", \"collapsed\": true, \"children\": [ { \"label\": \"folder D\", \"collapsed\": true, \"children\": [ { \"label\": \"folder E\", \"collapsed\": true, \"children\": [ { \"label\": \"file E1\", \"collapsed\": true }, { \"label\": \"file E2\", \"collapsed\": true }, { \"label\": \"file E3\", \"collapsed\": true } ] } ] }, { \"label\": \"folder F\", \"collapsed\": true, \"children\": [ { \"label\": \"file F1\", \"collapsed\": true }, { \"label\": \"file F2\", \"collapsed\": true } ] }, { \"label\": \"file C1\", \"collapsed\": true } ] }, { \"label\": \"folder G\", \"collapsed\": true, \"children\": [ { \"label\": \"file G1\", \"collapsed\": true }, { \"label\": \"file G2\", \"collapsed\": true }, { \"label\": \"file G3\", \"collapsed\": true }, { \"label\": \"file G4\", \"collapsed\": true } ] }, { \"label\": \"folder H\", \"collapsed\": true, \"children\": [ { \"label\": \"file H1\", \"collapsed\": true }, { \"label\": \"file H2\", \"collapsed\": true }, { \"label\": \"file H3\", \"collapsed\": true } ] } ] } ]"); 

Plunkr：https://plnkr.co/edit/CtXlRfdreolTTc018c0A?p=preview

は、私は手動でユーザータイプとしてノードを展開する必要があるか、私が展開して使用することができ、角度設定がありますかこれらのノード？

私は毎回ユーザータイプを起動するカスタム機能を追加しようとしました

：

function matchChildNode(objData , parentNode) { 

     angular.forEach(objData, function(childNode, key) { 

       var searchText = ""; 
       //AngularJS does not initialise the searchText var until used. As the function is re-initialised for every node 
       //need to check if is undefined 
       if ($scope.searchText == undefined) { 
        searchText = "" 
       } else { 
        searchText = $scope.searchText 
       } 

       if (searchText.toLowerCase() === childNode.label.toLowerCase()) { 
        parentNode.collapsed = false 
       }  

       matchChildNode(childNode.children , childNode); 

    }); 
    } 
} 

しかし、それは、各キーワードのユーザタイプのためのツリー構造全体を横断するときに、これは非常に非効率的です。これは正確に一致するテキストの場合にも有効です：searchText.toLowerCase() === childNode.label.toLowerCase()。 ===の代わりにcontainsを使用してみましたが、成功しませんでした。

plnkrのSRC：

app.css (removed due to stackoverflow 30000 character limitation when asking questions) 

directives.js (removed due to stackoverflow 30000 character limitation when asking questions) 

filter.js : 

'use strict'; 

angular.module('app.filters', []); 

index.html : 


<!doctype html> 
<html lang="en" ng-app="app"> 
<head> 
    <meta charset="utf-8"> 
    <title>treeRepeat demo</title> 
    <link rel="stylesheet" href="app.css"/> 
</head> 

<body> 

    <h1>treeRepeat</h1> 
    <div id="menu" ng-controller="MenuCtrl"> 
     <ul> 
      <li ng-repeat="item in menu" ng-class="{selected: item == getCurrentMenuItem()}"><a href="#/{{item.index}}">{{item.shortLabel}}</a></li> 
     </ul> 
     <h2>{{getCurrentMenuItem().fullLabel}}</h2> 
    </div> 

    <ng-view></ng-view> 

    <script src="angular.js"></script> 
    <script src="angular-route.js"></script> 
    <script src="app.js"></script> 
    <script src="services.js"></script> 
    <script src="controllers.js"></script> 
    <script src="filters.js"></script> 
    <script src="directives.js"></script> 
</body> 
</html> 

services.js : 

'use strict'; 

angular.module('app.services', []) 
    .constant('menu', []); 

treerepeat.html : 

<p id="expand-collapse-all"> 
    <a href="" ng-click="expandAll()">Expand all</a> 
    <a href="" ng-click="collapseAll()">Collapse all</a> 
</p> 


Filter : <input ng-model="myFilter" type="text"> 

<ul frang-tree> 
    <li frang-tree-repeat="node in treeData | filter:myFilter"> 
     <div><span class="icon" 
       ng-class="{collapsed: node.collapsed, expanded: !node.collapsed}" 
       ng-show="node.children && node.children.length > 0" 
       ng-click="node.collapsed = !node.collapsed"></span> 
      <span class="label" 
       ng-class="{folder: node.children && node.children.length > 0}" 
       ng-bind="node.label" 
       ng-click="action(node)"></span> 
     </div> 
     <ul ng-if="!node.collapsed && node.children && node.children.length > 0" 
      frang-tree-insert-children="node.children | filter:myFilter"></ul> 
    </li> 
</ul> 

Answer 1

あなたはpredicate機能でフィルタを使用することによって、これを達成することができます。

関数（値、インデックス）：述語関数を使用して任意のフィルタを書き込むことができます。関数は配列の各要素に対して呼び出されます。最終結果は、述部が真を返す要素の配列です。

1. 述語関数を作成

---

$scope.getFilter = function(value, index){ 
    if(!$scope.myFilter || $scope.myFilter === '' && (value.label === 'root')){ 
     $scope.collapseAll(); 
     return true; 
    } 
    if (findMatch(value, $scope.myFilter)){ 
     value.collapsed = false; 
     return true; 
    }else{ 
     value.collapsed = true; 
     return false; 
    } 
} 

現在のアイテムが一致するかどうかを確認する関数を作成する（この関数が呼び出されます述語関数から）

---

function findMatch(value, filter) { 
    var found = false; 
    if(value.label.toLowerCase().indexOf(filter) > -1){ 
     value.collapsed = false; 
     found = true; 
    } 
    if(!value.children || value.children.length===0){ 
     if(value.collapsed!== undefined){ 
      value.collapsed = true; 
      return found; 
      } 
     } 
     for (var i = 0; i < value.children.length; i++) { 
      if (value.children[i].label.toLowerCase().indexOf(filter) > -1) { 
       //match found 
       value.collapsed = false; 
       value.children[i].collapsed = false; 
       found = true; 
      } else { 
       //check child items 
       if(value.children[i].children && value.children[i].children.length>0) 
       { 
        if (findMatchingChildren(value.children[i].children, filter)) { 
        value.children[i].collapsed = false; 
        found = true; 
        }else{ 
        value.children[i].collapsed = true; 
        } 
       } 
      } 
     } 

     return found; 
} 

3.現在のアイテムの子アイテムをループする関数を作成します。この関数は、ステップ2で関数を呼び出します。すべてのレベルをチェックする再帰的な関数になります。

function findMatchingChildren(children, filter) { 
    var found = false; 
    for (var i = 0; i < children.length; i++) { 
     if (findMatch(children[i], filter)) { 
      children[i].collapsed = false; 
      found = true; 
     }else{ 
      children[i].collapsed = true; 
     } 
    } 
    return found; 
} 

あなたがhere

HTML

<p id="expand-collapse-all"> 
    <a href="" ng-click="expandAll()">Expand all</a> 
    <a href="" ng-click="collapseAll()">Collapse all</a> 
</p> 
Filter : <input ng-model="myFilter" type="text"> 
<ul frang-tree> 
    <li frang-tree-repeat="node in treeData | filter:getFilter"> 
     <div> 
      <span class="icon" 
       ng-class="{collapsed: node.collapsed, expanded: !node.collapsed}" 
       ng-show="node.children && node.children.length > 0" 
       ng-click="node.collapsed = !node.collapsed"></span> 
      <span class="label" 
       ng-class="{folder: node.children && node.children.length > 0}" 
       ng-bind="node.label" 
       ng-click="action(node)"></span> 
     </div> 
     <ul ng-if="!node.collapsed && node.children && node.children.length>0" frang-tree-insert-children="node.children | filter:myFilter"></ul> 
</li> 
</ul> 

Answer 2

完全angular-treeRepeatモジュールを捨てると、再帰的なテンプレートを使用することを検討してください。 Ben Foster氏は、これがこのblog postでどのように動作するかを説明しています。これははるかにエレガントな（そしてあまりにも精巧ではない）ソリューションだと私は思います。

フィルター付きの作業例：JSFiddle

HTML：

<div ng-app="app" ng-controller='AppCtrl'> 
    Filter: <input ng-model="myFilter" type="text"> 
    <script type="text/ng-template" id="categoryTree"> 
    {{ category.title }} 
    <ul ng-show="category.categories"> 
     <li 
     ng-repeat="category in category.categories | filter:myFilter" 
     ng-include="'categoryTree'"> 
     </li> 
    </ul> 
    </script> 
    <ul> 
    <li 
     ng-repeat="category in categories | filter:myFilter" 
     ng-include="'categoryTree'"> 
    </li> 
    </ul> 
</div> 

はJavaScript：

var app = angular.module('app', []) 
    .controller('AppCtrl', function($scope) { 
    $scope.categories = [{ 
     title: 'Computers', 
     categories: [{ 
      title: 'Laptops', 
      categories: [{ 
      title: 'Ultrabooks' 
      },{ 
      title: 'Macbooks' 
      }] 
     },{ 
      title: 'Desktops' 
     },{ 
      title: 'Tablets', 
      categories: [{ 
      title: 'Apple' 
      },{ 
      title: 'Android' 
      }] 
     } 
     ] 
    },{ 
     title: 'Printers' 
    }]; 
    });