AngularJS中的树状复选框

Question

我正在尝试创建像这样的树状复选框：

• o大师树 -
  • o树1
    • o Subtree 1
    • o Subtree 2
  • o树2
    • o Subtree 1
    • o Subtree 2

其中每个'o'是一个复选框，功能包括：

1. 单击复选框进行检查时，将检查其所有子项复选框。
2. 当单击复选框取消选中时，其所有子项复选框将取消选中
3. 当单击复选框取消选中时，所有其父复选框都将取消选中，因为它不会是“全选”

我尝试了什么：

1. ng-model＆amp;在所有树木中改变了 - 尽管这并不理想。

   选择以下全部
      儿童
      Grandchid 1
      Grandchid 2
   

   Demo

   function Ctrl($scope) {
   $scope.billing_is_shipping = true;
   
   $scope.master = true;
   $scope.child = true;
   $scope.grandchlid = true;
   
   $scope.checked = function (type) {
       switch (type) {
           case 'master':
               $scope.master = !$scope.master;
               if ($scope.master) {
   
                   $scope.child = true;
                   $scope.grandchild = true;
   
               } else {
   
                   $scope.child = false;
                   $scope.grandchild = false;
               }
               $scope.apply();
               break;
           case 'child':
               $scope.child = !$scope.child;
               if ($scope.child) {
                   $scope.grandchild = true;
   
               } else {
                   $scope.grandchild = false;
               }
               $scope.apply();
               break;
   
           case 'grandchild1':
               $scope.grandchild1 = !$scope.grandchild1;
               if(!$scope.grandchild1 || !$scope.grandchild2){
                    $scope.child = false;
                   $scope.master = false;
               }
               break;
   
       }
       console.log($scope.billing_is_shipping)
   }
   

   }

2. ng-model或仅更改ng

   Demo

我已经尝试了$ scope.apply（）但没有，但我只能获得第一次点击工作，然后一切都放弃了。

非常感谢任何方法或帮助，并提前感谢。

Answer 1

我刚刚写了一个关于此的指令，您可以根据需要使用多个级别的复选框。基本上它会递归检查你上面描述的逻辑。查看repo和live demo。