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

  • o主树-
  • o树1
  • o子树1
  • o子树2
  • o树2
  • o子树1
  • o子树2

  • 每个“o”都是一个复选框,其功能包括:
  • 当单击复选框进行检查时,将选中其所有子复选框。
  • 单击复选框取消选中时,其所有子复选框都将取消选中
  • 如果单击复选框以取消选中,则它的所有父复选框都将被取消选中,因为它不是“全选”的

  • 我尝试过的
  • ng模型和所有树中的ng更改-尽管这不是理想的。

    全选以下
    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)
    }
    

  • ng-model或仅ng-changed

    Demo

  • 我尝试了$ scope.apply(),但没有尝试,但是我只能让第一个点击工作,然后一切都放弃了。

    任何方法或帮助将不胜感激,并在此先感谢。

    最佳答案

    我刚刚为此写了一条指令,您可以根据需要使用任意数量的复选框。基本上,它会递归检查您上面描述的逻辑。 checkout repolive demo

    关于javascript - AngularJS中的树状复选框,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/25438792/

    10-11 19:59
    查看更多