如何根据parent检查所有children,同时还根据children检查parent?
How to check all children based on parent while also checking parent based on children?
Plnkr: https://plnkr.co/edit/Tt96EE2rruy1HAudRVJR?p=preview
我有以下复选框的嵌套循环:
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected">
{{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" ng-checked="continent.selected">
{{country.name}}
</li>
</ul>
</li>
</ul>
这是检测 ($watch) 部分或全部 children 复选框是否已被选中的代码,如果是,parent 复选框也会被选中。
效果很好。
但是,当我选中 parent 框时,它没有选中。
我想要实现的是,当我选中 parent 复选框时,它的所有 children 也会被选中,当我取消选中 parent 复选框时,它的所有 children 取消选中。
$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);
你可以试试。在 continent
值
发生变化时调用 function
<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)">
并在控制器中:添加另一个功能
$scope.parentChange = function(index) {
angular.forEach( $scope.destinations[index].countries, function(country) {
country.selected = $scope.destinations[index].selected;
});
};
并且可能不需要为国家/地区复选框添加 ng-checked="continent.selected"
。
使用
<input type="checkbox" ng-model="country.selected">
而不是
<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
复选框中的 ng-checked 属性接受一个表达式。所以你可以给出一个带有 and/or 条件的表达式,如下所述,使其根据表达式进行检查。
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
单击每个子复选框时,您不必编写单独的函数来进行计算
Plnkr: https://plnkr.co/edit/Tt96EE2rruy1HAudRVJR?p=preview
我有以下复选框的嵌套循环:
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected">
{{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" ng-checked="continent.selected">
{{country.name}}
</li>
</ul>
</li>
</ul>
这是检测 ($watch) 部分或全部 children 复选框是否已被选中的代码,如果是,parent 复选框也会被选中。
效果很好。
但是,当我选中 parent 框时,它没有选中。
我想要实现的是,当我选中 parent 复选框时,它的所有 children 也会被选中,当我取消选中 parent 复选框时,它的所有 children 取消选中。
$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);
你可以试试。在 continent
值
function
<input type="checkbox" ng-model="continent.selected" ng-change="parentChange($index)">
并在控制器中:添加另一个功能
$scope.parentChange = function(index) {
angular.forEach( $scope.destinations[index].countries, function(country) {
country.selected = $scope.destinations[index].selected;
});
};
并且可能不需要为国家/地区复选框添加 ng-checked="continent.selected"
。
使用
<input type="checkbox" ng-model="country.selected">
而不是
<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
复选框中的 ng-checked 属性接受一个表达式。所以你可以给出一个带有 and/or 条件的表达式,如下所述,使其根据表达式进行检查。
<input type="checkbox" ng-checked="child_1 && child_2 && child_3 && child_4 && child_5" ng-model="parent"/> Select All<br/>
单击每个子复选框时,您不必编写单独的函数来进行计算