![](/img/trans.png)
[英]how to put p-checkbox label from PrimeNG on the left of the checkbox
[英]Angular 6 PrimeNG - how to add a checkbox with distinct values from one column?
我有用於創建HTML表格的示例Angular PrimeNG代碼:
<h3 class="first">Basic</h3>
<p-table [value]="cars">
<ng-template pTemplate="header">
<tr>
<th>Vin</th>
<th>Year</th>
<th>Brand</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>{{car.vin}}</td>
<td>{{car.year}}</td>
<td>{{car.brand}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>
<h3>Dynamic Columns</h3>
<p-table [columns]="cols" [value]="cars">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr>
<td *ngFor="let col of columns">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
如何創建一個動態復選框(例如,在表格旁邊的屏幕左側),以便根據列中的唯一值生成選項? (類似於Amazon在屏幕左側顯示的內容):
並基於對每個復選框的單擊-它會顯示表中的行的子集...
謝謝
您必須使用: <p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
這是一個例子:
<p-table [value]="cars" [(selection)]="selectedCars">
<ng-template pTemplate="header">
<tr>
<th style="width: 35px">
<p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
</th>
<th>Make</th>
<th>Model</th>
<th>Color</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-car>
<tr>
<td>
<p-tableCheckbox [value]="car"></p-tableCheckbox>
</td>
<td>{{car.make}}</td>
<td>{{car.model}}</td>
<td>{{car.color}}</td>
</tr>
</ng-template>
</p-table>
看一下文檔: https : //www.primefaces.org/primeng/#/table/selection
更新的答案:
<div class="ui-g" style="width:250px;margin-bottom:10px">
<div class="ui-g-12"><p-checkbox name="group1" value="New York" label="New York" [(ngModel)]="selectedCities" inputId="ny"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group1" value="San Francisco" label="San Francisco" [(ngModel)]="selectedCities" inputId="sf"></p-checkbox></div>
<div class="ui-g-12"><p-checkbox name="group1" value="Los Angeles" label="Los Angeles" [(ngModel)]="selectedCities" inputId="la"></p-checkbox></div>
</div>
TS
selectedCities: string[] = [];
selectedCategories: string[] = ['Technology', 'Sports'];
checked: boolean = false;
您始終可以使用* ng來創建復選框:https: //www.primefaces.org/primeng/#/checkbox
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.