Filter angular js data source inside parent and child nodes
Question
I have created a tree view in angular js using ng-repeat . I have also added a filter to filter my data source. I am able to filter the parent nodes and the resource nodes as what I expected, but my problem is I could not achieve the child node filtering as I expected. This is the picture of my current development status.
Img 4 Shows the current ststus of filtering my child nodes, but my exact requirement is like that in Img 5. ie, on filtering a node if there is a child node present, only that child node and its parent should apperar, all the remaining child nodes must be hidden. What should I do for that. Here is my code snippet.
<!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>
2 answers
solution1
2 ACCPTED 2017-02-03 13:48:40
After putting some more effort, I just created a simple logic to implement my requirement. I'm posting the solution because this might be helpful for someone.
I just added an ng-if inside my child item div. It displays the div content based on two condition.
- The individual child object should be visible if the search key contains the characters inside the div.
- All the child elements must be visible if the search key consists of the characters in the parent node.
Here is my final code.
<!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>
solution2
0 2017-02-02 07:48:39
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...
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.