gpt4 book ai didi

javascript - 具有独特选择的 Material 复选框

转载 作者:太空狗 更新时间:2023-10-29 18:19:37 27 4
gpt4 key购买 nike

我在 angular2+bootstrap+material 项目中为这个问题苦苦挣扎了 2 天。

我需要更改 Material 设计复选框:

  • 当我选中表格中的一个复选框时,该复选框必须是唯一的

我知道我可以使用 Material 单选按钮,但在那种情况下我有另一个问题:我无法取消选中单选按钮。

所以我需要启用唯一检查以及检查/取消检查功能。

enter image description here

我试过以下方法

  • 使用 document.getElement.blablabla 与 dom 交互
  • 使用 Angular 2的dom插值
  • Javascript 函数
  • Jquery函数

这是html的代码:

<div class="row">
<div class="col-lg-12">
<label>Ordini cliente</label>
<mat-table #table [dataSource]="dataSource">

<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->

<!-- Select Column -->
<ng-container matColumnDef="Select">
<mat-header-cell *matHeaderCellDef></mat-header-cell>
<mat-cell *matCellDef="let item"><mat-checkbox color="primary"></mat-checkbox></mat-cell>
</ng-container>


//OTHER COLUMNS ...

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>


</div>

我的想法是像这样将元素绑定(bind)到点击事件

<mat-cell *matCellDef="let item"><mat-checkbox (click)="foo()" color="primary"></mat-checkbox></mat-cell>

最佳答案

设置一个属性来跟踪选中了哪个。然后只为选中的那个设置[checked]。例如,在这里,我使用 ngFor 索引跟踪:

<div *ngFor="let item of [1,2,3];  let i = index">
<mat-checkbox [checked]="selected === i" (change)="selected = i">Check me!</mat-checkbox>
</div>

DEMO

关于javascript - 具有独特选择的 Material 复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46833213/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com