javascript - AngularJS 中的树状复选框

Question

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

• o Master Tree -
  • o 树 1
    • o 子树 1
    • o 子树 2
  • o 树 2
    • o 子树 1
    • o 子树 2

其中每个“o”是一个复选框，功能包括:

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

我尝试过的:

1. 所有树中的 ng-model 和 ng-changed - 尽管这并不理想。

   全选
   child
   孙子1
   孙子 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-changed

   Demo

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

任何方法或帮助将不胜感激，并提前致谢。

Answer 1

我刚刚为此编写了一个指令，您可以根据需要设置任意多级别的复选框。基本上它递归地检查你上面描述的逻辑。查看repo , 和 live demo .