AngularJS - 在父检查中取消选中子复选框

Question

我的页面上有 3 到 4 级层次结构的复选框。选中第一级时，会出现 2 级复选框，并且在选中 2 级 - 3 级复选框时会出现。

当用户取消选中父复选框时，应取消选中所有子复选框，包括收音机。

这是场景。

我通过为每个孩子创建一个容器 div 然后使用 ng-if 来完成隐藏工作。这仅显示隐藏容器。但是如何取消选中所有子元素复选框？

示例代码：-

<div class="col-sm-12">
                <input type="checkbox" ng-model="todo.level1" />
                <label>Level 1</label>
            </div>
            <div class="col-sm-12" ng-show="todo.level1">
                <!------- Level 2 ------->
                <div class="col-sm-12">
                    <div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1">
                        <input type="checkbox" ng-model="todo.c2" />
                        <label>&nbsp;C2</label>
                    </div>
                    <div class="col-sm-12" ng-show="todo.level2">
                        <div class="col-sm-12" ng-if="todo.level2">
                            <div class="margin-left-2">
                                <input type="checkbox" ng-model="todo.level3" />
                                <label>Level 3 - 1</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.level4">
                            <div class="margin-left-3">
                                <select id="Select1">
                                    <option>Choose</option>
                                    <option>25%</option>
                                    <option>25-50%</option>
                                    <option>50%</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.c2">
                            <div class="margin-left-2">
                                <input type="checkbox" ng-model="todo.level3" />
                                <label>Level 3 - 2</label>
                            </div>
                        </div>
                        <div class="col-sm-12" ng-if="todo.level4">
                            <div class="margin-left-3">
                                <label>Level 4 - 1</label><br />
                                <input type="radio" value="Yes" /><label>&nbsp;Yes</label>
                                <input type="radio" value="No" /><label>&nbsp;No</label>
                            </div>
                        </div>
                    </div>
                </div>

Answer 1

你有两个选择

1 关注变化

mod.controller('parentCtrl', function($scope){ $scope.todo = {level1 : false};

$scope.$watch('todo.level1', function(val){
    if(val === false){
        // clear your checkboxes
    }
});

2 在子 div 上添加 ng-init 并在显示 div 时设置“初始值”，即 ng-init='todo.level2 =false'（每次显示时都会评估）

div class="col-sm-offset-1 col-sm-11" ng-if="todo.level1"
ng-init='todo.level2 = false'