![](/img/trans.png)
[英]how to put p-checkbox label from PrimeNG on the left of the checkbox
[英]Handle selection p-checkbox with the same group
我有一個如下列表:
rows: any[] = [{"id":"1721079361", "type":"0002", "number":"2100074912"},
{"id":"1721079363", "type":"0003", "number":"2100074913"},
{"id":"1721079363", "type":"0004", "number":"2100074914"},
{"id":"1721079361", "type":"0001", "number":"2100074911"}];
用戶只選擇具有相同 Id 的項目。 這是 HTML
<p-table [value]="rows">
<ng-template pTemplate="header">
<tr>
<td>
</td>
<th>ID</th>
<th>Type</th>
<th>Number</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-row>
<tr [pSelectableRow]="row">
<td>
<p-checkbox [(ngModel)]="selectedValues" value="{{row.id}}"></p-checkbox>
</td>
<td>{{row.id}}</td>
<td>{{row.type}}</td>
<td>{{row.number}}</td>
</tr>
</ng-template>
</p-table>
Test : {{selectedValues}}
但直到現在,我都找不到解決方案。 請建議https://stackblitz.com/edit/angular-8ddptg
您可以使用禁用屬性並將其與行值綁定,動態更改任何復選框的事件。
組件.html
<p-checkbox [disabled]="row && row.isDisable" [(ngModel)]="selectedValues" value={{row.id}}" (onChange)="updateList(selectedValues)" ></p-checkbox>
組件.ts
updateList(val){
if(val.length === 0){
for(let i = 0; i<this.rows.length ;i++){
this.rows[i]['isDisable'] = false;
}
}else{
let id = val[0];
for(let i = 0; i<this.rows.length ;i++){
if(this.rows[i]['id']!== id){
this.rows[i]['isDisable'] = true;
}
}
}
}
這是工作代碼
希望這能解決您的目的!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.