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

Question

我的页面上有一个3到4级层次结构的复选框。检查第一级时，出现2级复选框＆amp;检查2级 - 3级复选框出现。

当用户取消选中父复选框时，应取消选中所有子复选框，包括无线电。

以下是情景。

我通过为每个孩子创建一个容器div来完成show hide工作。然后使用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（＆＃39; parentCtrl＆＃39;，function（$ scope）{     $ scope.todo = {level1：false};

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

2在子div上添加ng-init并设置＆＃39;初始值＆＃39;当显示div时，即ng-init =＆＃39; todo.level2 = false＆＃39; （每次显示时都会对此进行评估）

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