[英]Angular 6 PrimeNG - how to add a checkbox with distinct values from one column?
I have example Angular PrimeNG code for creating a Html Table: 我有用于创建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>
How to create a dynamic checkbox (eg on the left side of a screen next to a table) so that options are generated based on unique values from a column? 如何创建一个动态复选框(例如,在表格旁边的屏幕左侧),以便根据列中的唯一值生成选项? (something like Amazon has on the left side of the screen): (类似于Amazon在屏幕左侧显示的内容):
And based on a click for each checkbox - it would show subset of rows in a table... 并基于对每个复选框的单击-它会显示表中的行的子集...
Thanks 谢谢
You have to use : <p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
您必须使用: <p-tableHeaderCheckbox [value]="car"></p-tableHeaderCheckbox>
Here's an example: 这是一个例子:
<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>
Take a look to the documentation: https://www.primefaces.org/primeng/#/table/selection 看一下文档: https : //www.primefaces.org/primeng/#/table/selection
UPDATED ANSWER: 更新的答案:
<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 TS
selectedCities: string[] = [];
selectedCategories: string[] = ['Technology', 'Sports'];
checked: boolean = false;
You can always create the checkboxes with a *ngFor https://www.primefaces.org/primeng/#/checkbox 您始终可以使用* ng来创建复选框:https: //www.primefaces.org/primeng/#/checkbox
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.