親ノードと子ノード内の角度jsデータソースのフィルタリング

でツリービューを作成しました。ng-repeatを使用しました。私はまた、私のデータソースをフィルタリングするフィルタを追加しました。親ノードとリソースノードを私が期待したものとしてフィルタリングすることができましたが、私の問題は期待通りに子ノードのフィルタリングを達成できなかったことです。これは私の現在の開発状況の写真です。親ノードと子ノード内の角度jsデータソースのフィルタリング

IMG 4は、私の子ノードをフィルタリングの現在ststusを表示しますが、私の正確な要件は、唯一その子ノードの子ノードが存在する場合は、ノードをフィルタ上、すなわちIMG 5のそれに似ていますその親がApperarする必要があります、残りのすべての子ノードを非表示にする必要があります。私はそのために何をすべきですか？ここに私のコードスニペットがあります。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
     angular.module("app", []) 
 
      .controller('MainController', function ($scope) { 
 
       $scope.ObjectData = { "name": "Main Object 1", 
 
             "ParentObject": [ 
 
             { 
 
              "name": "Parent Object 1", 
 
              "ChildObject": [ 
 
              {"name": "Child Object 11"}, 
 
              {"name": "Child Object 12"} 
 
              ] 
 
             }, 
 
             { 
 
              "name": "Parent Object 2", 
 
              "ChildObject": [ 
 
              {"name": "Child Object 21"}, 
 
              {"name": "Child Object 22"} 
 
              ] 
 
             } 
 
             ], 
 
             "resources": [ 
 
             "Resource 1", "Resource 2" 
 
             ] 
 
            } 
 
      }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div ng-app="app" ng-controller="MainController"> 
 
     <input type="text" placeholder="search" ng-model="search"> 
 
     <ul> 
 
      <li> 
 
       <a> 
 
        <span>{{ ObjectData.name }}</span> 
 
       </a> 
 
       <ul> 
 
        <li ng-repeat="subItem in ObjectData.ParentObject | filter:search"> 
 
         <a> 
 
          <span>{{ subItem.name }}</span> 
 
         </a> 
 

 
         <ul> 
 
          <li ng-repeat="childItem in subItem.ChildObject"> 
 
           <a> 
 
            <span>{{ childItem.name }}</span> 
 
           </a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 

 
       <ul> 
 
        <li ng-repeat="resources in ObjectData.resources | filter:search"> 
 
         <a> 
 
          <span>{{ resources }}</span> 
 
         </a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-02-02 Nitheesh

いくつかのより多くの努力を入れた後、私はちょうど私の要件を実装するための単純なロジックを作成しました。これは誰かのために役立つかもしれないので、私は解決策を投稿しています。

私はちょうど私の子供の項目div内にng-ifを追加しました。 2つの条件に基づいてdivコンテンツを表示します。

検索キーがdivの内側に文字が含まれている場合、個々の子オブジェクトが表示されるはずです。

検索キーが親ノードの文字で構成されている場合は、すべての子要素を表示する必要があります。

ここは私の最終的なコードです。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script> 
 
     angular.module("app", []) 
 
      .controller('MainController', function ($scope) { 
 
       $scope.ObjectData = { "name": "Main Object 1", 
 
             "ParentObject": [ 
 
             { 
 
              "name": "Parent Object 1", 
 
              "ChildObject": [ 
 
              {"name": "Child Object 11"}, 
 
              {"name": "Child Object 12"} 
 
              ] 
 
             }, 
 
             { 
 
              "name": "Parent Object 2", 
 
              "ChildObject": [ 
 
              {"name": "Child Object 21"}, 
 
              {"name": "Child Object 22"} 
 
              ] 
 
             } 
 
             ], 
 
             "resources": [ 
 
             "Resource 1", "Resource 2" 
 
             ] 
 
            }; 
 
       $scope.IsChildObjectVisible = function(parent, child){ 
 
        var searchKey = $scope.search; 
 
        var returnVal = true; 
 
        if(undefined != searchKey && null != searchKey && searchKey.length > 0){       
 
         returnVal = ((child.name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1) || //Search key is present in a child node then that node is visible 
 
            (parent.name.toLowerCase().indexOf(searchKey.toLowerCase()) > -1)); //Search key is present in the parent node so all the child nodes inside that are visible 
 
        } 
 
        return returnVal; 
 
       } 
 
      }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <div ng-app="app" ng-controller="MainController"> 
 
     <input type="text" placeholder="search" ng-model="search"> 
 
     <ul> 
 
      <li> 
 
       <a><span>{{ ObjectData.name }}</span></a> 
 
       <ul> 
 
        <li ng-repeat="subItem in ObjectData.ParentObject | filter:search"> 
 
         <a><span>{{ subItem.name }}</span></a> 
 
         <ul> 
 
          <li ng-repeat="childItem in subItem.ChildObject" ng-if="IsChildObjectVisible(subItem, childItem)"> 
 
           <a><span>{{ childItem.name }}</span></a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 

 
       <ul> 
 
        <li ng-repeat="resources in ObjectData.resources | filter:search"> 
 
         <a><span>{{ resources }}</span></a> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2017-02-03 13:48:40 Nitheesh

HTML：

<li ng-repeat="childItem in subItem.ChildObject" ng-if='$filter(subItem.ChildObject, search).length == 0 || childItem.name == search'> 
    <a> 
     <span>{{ childItem.name }}</span> 
    </a> 
</li>

Javascriptを：

.controller('MainController', function ($scope, $filter) { 
    $scope.$filter = $filter('filter'); 
    //other stuff... 
});

出典

2017-02-02 07:48:39

親ノードと子ノード内の角度jsデータソースのフィルタリング

答えて

関連する問題