AngularJS中类似树的复选框

Question

我正在尝试创建这样一个类似树的复选框：

• 主树-
  • O树1
    • O子树1
    • O子树2

​

- o Tree 2  
    - o Subtree 1
    - o Subtree 2

​

​

其中，每个“o”都是一个复选框，函数包括：

1. 当一个复选框被单击以选中时，它的所有子复选框都将被选中。
2. 当单击复选框以取消选中时，它的所有子复选框都将被取消选中。
3. 当一个复选框被单击以取消选中时，它的所有父复选框都将被取消选中，因为它不会被“选择所有”。

我试过的是：

1. ng-模型和ng-在所有的树中都发生了变化--尽管下面这不是ideal.Select 孩子 格朗奇德 格兰奇德2

演示

函数Ctrl($scope) { $scope.billing_is_shipping =真；$scope.master =真；$scope.child =真；$scope.grandchlid =真；$scope.checked =函数(类型){ case (type) {case 'master'：$scope.master = !$scope.master；if ($scope.master) { $scope.child = true；$scope.grandchild = true；} $scope.child = false；$scope.grandchild = false；} $scope.apply()；打断；case 'child'：$scope.child = !$scope.child；if ($scope.child) { $scope.grandchild = true；}if{ $scope.grandchild = false；} $scope.apply()；break；大小写‘grandchild1 1’：$scope.grandchild1 = !$scope.grandchild1；if(!$scope.grandchild1欧元!$scope.grandchild2){ $scope.child = false；$scope.master = false；} console.log($scope.billing_is_shipping) }

}

1. ng-模型或ng-只更改演示

我尝试过$scope.apply()，但没有，但我只能让第一次点击开始工作，然后一切都放弃了。

任何方法或帮助将不胜感激，并在此之前感谢。

Answer 1

我刚刚就此编写了一个指令，您可以使用它拥有任意级别的复选框。基本上，它递归地检查上面描述的逻辑。查看存储库和现场演示。