Angualar多选复选框逻辑处理

最新推荐文章于 2023-05-10 16:48:45 发布

qq_36398269

最新推荐文章于 2023-05-10 16:48:45 发布

阅读量839

点赞数 1

文章标签：多选复选框 angualar

本文链接：https://blog.csdn.net/qq_36398269/article/details/102803658

版权

本文介绍如何在Angular应用中使用多选复选框组件，并进行双向数据绑定。通过[nzIndeterminate]属性处理未全选时全选按钮的状态，以及[(nzChecked)]用于设置选中状态的数据传递。在JavaScript中，我们实现了单选数据函数来处理未全选时的逻辑判断，并更新全选按钮状态。此外，还提供了全选功能，当全选时，全选按钮状态显示为"勾选"；取消全选时，状态变为"空白"。在页面翻转后，所有复选框状态会恢复默认。

摘要由CSDN通过智能技术生成

在html里引用多选框组件，并双向绑定数据

[nzIndeterminate] ：表示未全选状态时，全选按钮的状态变化
[(nzChecked)]：表示选中状态后的数据传值

<tr>
<th nzShowCheckbox  [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
</tr>
 <tr *ngFor="let data of dataList">
     <td nzShowCheckbox  style="width:24px" [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckStatus()"></td>
 </tr>

在JS里撰写逻辑
1.单选数据函数：未全选时的逻辑判断，同时反馈给全选按钮，使其状态该变为"点"
2.全选函数：全选时，全选按钮状态改变为"勾选"；全部不选时，全选按钮状态改变为"空白"
3.翻页后，所有状态恢复默认

//表格多选框
  //单选数据
  refreshCheckStatus() {
    let checkedNum = 0;
    this.dataList.forEach(item => {
      checkedNum += item.checked ? 1 : 0;
    });
    if (ch