Angular JS - Parent and Child Node - Handling menu and sub-menu
Question
Please help me with the below code. I have created this so that anyone can make changes and give me a solution.
HTML
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)"> {{continent.name}} ({{continent.countries_selected}}
/ {{continent.countries.length}}) - {{continent.all_selected}}
<ul>
<li ng-repeat="country in continent.countries">
<input type="checkbox" ng-model="country.selected"> {{country.name}} </li>
</ul>
</li>
</ul>
<p>You have selected: {{total_selected}} Countries in Total</p>
</body>
</html>
Controller
app.controller('MainCtrl', function($scope) {
$scope.total_selected = 0;
$scope.$watch('destinations', function(destinations){
var total_selected = 0;
angular.forEach(destinations, function(continent){
continent.countries_selected = 0;
angular.forEach(continent.countries, function(country){
total_selected += country.selected ? 1 : 0
continent.countries_selected += country.selected ? 1 : 0
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
});
});
$scope.select_all = function(continent){
continent.selected = true;
}
$scope.total_selected = total_selected;
}, true);
$scope.select = function(continent){
console.log(continent)
continent.selected = true;
}
$scope.parentChange = function(index) {
angular.forEach( $scope.destinations[index].countries, function(country) {
country.selected = $scope.destinations[index].selected;
});
};
$scope.destinations = [
{
"name": "India",
"countries": [
{
"name": "Mumbai"
},
{
"name": "Delhi"
},
{
"name": "Calicut"
}
]
},
{
"name": "America - US",
"countries": [
{
"name": "New York"
},
{
"name": "Canada"
},
{
"name": "Miami"
},
{
"name": "Hackensack"
}
]
}
];
});
What I want to do is:
For Ex: If I select a child node (Delhi) then the parent node (India) should be checked automatically.
In other words, any child node checked should immediately check the parent node and vice-versa
Thanks, Kimz.
1 answers
solution1
0 ACCPTED 2017-06-15 10:51:38
It's a pretty simple change, right now you're watching the collection for changes and doing this inside of it
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
Whereas what you really want is if at least 1 country is selected for that continent to be selected, so just change it to
if (continent.countries_selected > 0) {
continent.selected = true;
} else {
continent.selected = false;
}
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.