javascriptangularjsangularjs-ng-repeatangular-filters
Filter angular js data source inside parent and child nodes
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. i.e, 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>Solution
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>- Vue.js "Maximum call stack size exceeded" error. Passing data from parent to child failing
- d3.js multiple relationship visual / linkHorizontal() / tangled tree
- How to disable selection of cells in ag-grid?
- How do i pass form input values from child component to the parent component in REACT?
- How can I access Promise resolution callbacks outside the Promise constructor callback’s scope?
- How to create one clipboard script for two copy buttons?
- Why onchange behaves differently on React vs HTML
- Conditional render 1 of 3 components on button click (react)
- How to multiply BigInt with float?
- How to validate that 2 folders on the same level cannot have the same name in a recursive Angular form array
- what is the wrong with this javascript function?
- Trying to refresh Open Weather Api every 3 or 30 seconds
- How to hide properties of an object?
- react-select wont close when clicking outside
- Disable future dates after today in Jquery Ui Datepicker
- Symbol.hasInstance Property working in JS
- How do I get onmouseenter and onmouseleave to report with respect to an image rather than to its containing div?
- Webpack watchOptions.ignored – exclude certain directories from being ignored
- How to avoid scientific notation for large numbers in JavaScript?
- KineticsJs auto resize canvas
- Sequence of promise.race() in the event loop
- Using html2canvas to convert to image on keyup & keypress
- Run function controller when date expired
- How to dynamically set --max-heap-size and --max-old-space-size in Node.js based on available memory?
- How to troubleshoot storybook not loading stories?
- How to correctly handle ajax timeouts
- The project's package.json file seems malformed
- What is this jQuery doing?
- Escape a space in a file path string
- How to refresh page, Google app Script Web