父和子复选框的选择

问题描述

我正在一个页面上分配不同角色的权限,因此,我的nvbar中存在每个部分的父级和子级列表。我正在尝试做: 当用户选择父节时,应选中所有复选框 当用户选择一个父节但取消选择该组之一时,应取消选择父节 当用户取消选择父级时,应取消选中所有子级复选框。

我正在尝试使用check属性,更改状态(对或错) 分配了一个特定的动态ID进行检查,但不适用于我。 我对如何实现它感到困惑。如果有人可以帮助我,我真的会很感激

 <!-- Here will go the sections -->
                        <nz-collapse>
                          <nz-collapse-panel
                            *ngFor="let parent of this.userMngmtService.getNvBar() let i = index"
                            [nzHeader]="parent.Section"
                            [nzActive]="parent.is_active"
                            [nzExtra]="extraTpl"
                            [nzdisabled]="parent.disabled">
                            <p style="margin:0;">
                              <label class="checkBox-inline">
                                <input type="checkBox" [value]="parent.parentId" (change)="viewParentSelected($event,i)">View
                              </label>
                              <label class="checkBox-inline">
                                <input type="checkBox" value="">Edit
                              </label>
                              <label class="checkBox-inline">
                                <input type="checkBox" value="">Delete
                              </label>
                            </p>

                            <!-- SubSection -->
                            <nz-collapse>
                              <nz-collapse-panel
                                *ngFor="let child of this.userMngmtService.getNvBar()[i].Sub"
                                [nzHeader]="child.permission"
                                [nzActive]="child.is_active"
                                [nzExtra]="extraTpl"
                                [nzdisabled]="child.disabled"

                              >
                                <p style="margin:0;">
                                  <label class="checkBox-inline">
                                    <input type="checkBox" [value]="child.permission_id" (change)="viewChildSelected($event,i)" id="'checkedBox'+i">View
                                    <!-- <input type="checkBox" [value]="child.permission_id" (change)="viewChildSelected($event)" >View -->
                                  </label>
                                  <label class="checkBox-inline">
                                    <input type="checkBox" value="">Edit
                                  </label>
                                  <label class="checkBox-inline">
                                    <input type="checkBox" value="">Delete
                                  </label>
                                </p>
                              </nz-collapse-panel>
                            </nz-collapse>
                            <!-- SubSection End -->

                          </nz-collapse-panel>
                        </nz-collapse> 

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)