[英]Is there any way to add divider or separator in PrimeNG P-dropdown value set
I am using Angular P-dropdown functionality, data will be populated from db, I will need to add divider after each set of key.我正在使用 Angular P-dropdown 功能,数据将从 db 填充,我需要在每组键后添加分隔符。
ie/ IE/
<p-dropdown placeholder="Select" [options]="optionsArray" [(ngModel)]="selectOption"
(ngModelChange)="triggerOption($event)" dropdownIcon="icons-down">
</p-dropdown>
//dynamic value from db
var ab = [
{ label: "group 3", value: { key: 'group', value: '3' } },
{ label: "Female", value: { key: 'gender', value: 'F' } },
{ label: "New", value: { key: 'action', value: "New Action" } },
{ label: "group 1", value: { key: 'group', value: '1' } },
{ label: "group 2", value: { key: 'group', value: '2' } },
{ label: "Male", value: { key: 'gender', value: "Male" } },
{ label: "Old", value: { key: 'action', value: "Old" } },
{ label: "Not required", value: { key: 'action', value: "ACnotReq" } },
];
var newGenderArray = ab.filter(type => {
return type.value.key == 'gender';
});
var newGroupArray =ab.filter(type => {
return type.value.key == 'group';
})
...,// logic
var optionsArray = newGenderArray.concat(newGroupArray);
console.log("optionsArray:", optionsArray);
tried the following CSS in static way,needed this as dynamic since values are coming from db, count is getting changed.以 static 的方式尝试了以下 CSS,需要这是动态的,因为值来自数据库,计数正在改变。
.ui-dropdown-items li:nth-child(3), .ui-dropdown-items li:nth-child(8) {
border-bottom: 1px solid #dbdbdb;
...
}
tried advance filtering something like this:尝试了像这样的高级过滤:
<h5>Content with Filters</h5>
<p-dropdown [options]="countries" [(ngModel)]="selectedCountry" optionLabel="name" [filter]="true" filterBy="name" [showClear]="true" placeholder="Select a Country">
<ng-template pTemplate="selectedItem">
<div class="country-item country-item-value" *ngIf="selectedCountry">
<img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + selectedCountry.code.toLowerCase()" />
<div>{{selectedCountry.name}}</div>
</div>
</ng-template>
<ng-template let-country pTemplate="item">
<div class="country-item">
<img src="assets/showcase/images/demo/flag/flag_placeholder.png" [class]="'flag flag-' + country.code.toLowerCase()" />
<div>{{country.name}}</div>
</div>
</ng-template>
</p-dropdown>
based from https://primefaces.org/primeng/showcase/#/dropdown基于https://primefaces.org/primeng/showcase/#/dropdown
in the ng-template you can modify its content including adding some conditions and add a divider在 ng-template 中,您可以修改其内容,包括添加一些条件和添加分隔符
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.