AngularJS:孙子复选框从父复选框中选择
我正在尝试在AngularJS中创建一个复选框层次结构。我可以创建一个父复选框，它将自动选中子复选框，如果我手动选中子复选框，它将更新其子复选框(父复选框的孙子)复选框。但是，如果我单击父复选框，则不会更新孙子复选框。
在添加JavaScript以确保父复选框更新孙子复选框之前，我只想知道是否有更简单的方法。下面是我的代码和一个供您使用的jsFiddle。
<div ng-app="">
<strong>Parent</strong> (will check all Child boxes):
<input type="checkbox" ng-model="parent" />
<br/>
<strong>Child 1</strong>:
<input type="checkbox" ng-checked="parent" />
<br />
<strong>Child 2</strong>:
<input type="checkbox" ng-checked="parent" />
<br />
<strong>Child 3</strong> (will check all Grandchild boxes):
<input type="checkbox" ng-checked="parent" ng-model="child" />
<br />
<strong>Grandchild 1</strong>:
<input type="checkbox" ng-checked="child" />
<br />
<strong>Grandchild 2</strong>:
<input type="checkbox" ng-checked="child" />
<br />
<strong>Grandchild 3</strong>:
<input type="checkbox" ng-checked="child" />
</div>任何帮助都将不胜感激！
另外，有1500名代表的人可以帮我创建标签"angularjs-ng-checked“吗？那就太棒了！
回答 2
Stack Overflow用户
发布于 2013-04-24 22:45:46
不幸的是，没有更简单的方法。
来自Misko via github
...我们认为你试图做的事情是没有意义的。ng-checked创建单向数据绑定，而ng-model创建双向数据绑定。本质上，你有两个模型连接到同一个输入元素，我认为这是错误的。我认为ng-model和ng-checked应该单独使用，即一个或另一个，但不能一起使用。
除了使用指令或在控制器中自己同步检查之外，没有太多的选择。
Stack Overflow用户
发布于 2013-04-25 08:41:05
我一直在胡乱摆弄(哈哈)，我想出了一个似乎很通用的解决方案……这意味着，您可以拥有任意数量的嵌套复选框。我确信我正在遵循一些奇怪的实践，并且可能会在某些方面提高性能--这肯定会遍历许多对象--所以请随时批评它！我很乐意听到任何反馈。
代码可以在这个jsFiddle中找到。我也会把它贴在这里。
HTML
<!DOCTYPE html>
<html>
<head>
<script src="../js/angularjs106.js"></script>
<script src="angular_checkbox.js"></script>
<link rel="stylesheet" href="angular_checkbox.css" />
</head>
<body ng-app>
<div ng-controller="Ctrl">
<ul>
<li>
<input type="checkbox" value="allChecks.id" ng-model="allChecks.isChecked" ng-change="checkChange(allChecks)">
<label>{{allChecks.id}}</label>
</li>
<li ng-repeat="child in allChecks.children">
<input type="checkbox" ng-model="child.isChecked" ng-change="checkChange(child)">
<label>{{child.id}}</label>
<ul>
<li ng-repeat="grandchild in child.children">
<input type="checkbox" ng-model="grandchild.isChecked" ng-change="checkChange(grandchild)">
<label>{{grandchild.id}}</label>
<ul>
<li ng-repeat="grandgrandchild in grandchild.children">
<input type="checkbox" ng-model="grandgrandchild.isChecked" ng-change="checkChange(grandgrandchild)">
<label>{{grandgrandchild.id}}</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>The JavaScript
function Ctrl($scope) {
function Node(id, isChecked, parent) {
this.id = id;
this.isChecked = isChecked;
this.parent = parent;
this.children = [];
}
var parent = new Node('ALL', true, "");
var child1 = new Node('Child 1', true, parent);
var gchild1 = new Node('Grandchild 1', true, child1);
var gchild2 = new Node('Grandchild 2', true, child1);
var gchild3 = new Node('Grandchild 3', true, child1);
child1.children.push(gchild1, gchild2, gchild3);
var child2 = new Node('Child 2', true, parent);
var child3 = new Node('Child 3', true, parent);
var child4 = new Node('Child 4', true, parent);
var gchild4 = new Node('Grandchild 4', true, child4);
var gchild5 = new Node('Grandchild 5', true, child4);
var gchild6 = new Node('Grandchild 6', true, child4);
var ggchild1 = new Node('Grandgrandchild 1', true, gchild6);
var ggchild2 = new Node('Grandgrandchild 2', true, gchild6);
var ggchild3 = new Node('Grandgrandchild 3', true, gchild6);
gchild6.children.push(ggchild1, ggchild2, ggchild3);
child4.children.push(gchild4, gchild5, gchild6);
var child5 = new Node('Child 5', true, parent);
parent.children.push(child1, child2, child3, child4, child5);
$scope.allChecks = parent;
function parentCheckChange(item) {
for (var i in item.children) {
item.children[i].isChecked = item.isChecked;
if (item.children[i].children) {
parentCheckChange(item.children[i]);
}
}
}
function childCheckChange(parent) {
var allChecks = true;
for (var i in parent.children) {
if (!parent.children[i].isChecked) {
allChecks = false;
break;
}
}
if (allChecks) {
parent.isChecked = true;
}
else {
parent.isChecked = false;
}
if (parent.parent) {
childCheckChange(parent.parent);
}
}
$scope.checkChange = function(item) {
// We're handling the ALL checkbox
if (item.id === $scope.allChecks.id) {
parentCheckChange(item);
}
// We're handling the toggling of all of the children here
else {
if (item.children) {
parentCheckChange(item);
}
childCheckChange(item.parent);
}
};
}小CSS
ul {
list-style: none;
}无论如何，我想找出一种在对象中找到父对象的方法。原来，原生JavaScript对象并不包含对子对象的父对象的引用，因此我决定创建一个名为Node的类。当我实例化Node时，我可以将父对象设置为包含子对象的对象。一旦我这样做了，递归就变得非常简单。
当我们意识到我们有一个父级时，就会调用parentCheckChange。当孩子的支票改变时，childCheckChange会被调用(讨厌！)，但它是用来监视父母的所有孩子的……如果它们都被检查了，那么我们需要确保检查父对象，因为这个父对象已经被检查过了，所以我们需要检查是否应该(递归地)检查它的父对象。
代码可能有点混乱，如果您感到困惑，请提出问题！
https://stackoverflow.com/questions/16174113
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号