Фильтровать угловой источник данных js внутри родительских и дочерних узлов

Я создал вид дерева в angular 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

Надев еще немного усилий, я просто создал простую логику для реализации моего требования. Я отправляю решение, потому что это может быть полезно для кого-то.

Я только что добавил ng-if внутри моего дочернего элемента div. Он отображает содержимое 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 внутри родительских и дочерних узлов

ответ

Смежные вопросы