Skip to content

Commit

Permalink
Fixed #4497
Browse files Browse the repository at this point in the history
  • Loading branch information
Çağatay Çivici committed Dec 20, 2017
1 parent a5683cd commit 20a5676
Show file tree
Hide file tree
Showing 2 changed files with 32 additions and 9 deletions.
11 changes: 10 additions & 1 deletion src/app/components/dropdown/dropdown.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@ export const DROPDOWN_VALUE_ACCESSOR: any = {
<input #in [attr.id]="inputId" type="text" [attr.aria-label]="selectedOption ? selectedOption.label : ' '" readonly (focus)="onInputFocus($event)" role="listbox"
(blur)="onInputBlur($event)" (keydown)="onKeydown($event)" [disabled]="disabled" [attr.tabindex]="tabindex" [attr.autofocus]="autofocus">
</div>
<label [ngClass]="{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}" *ngIf="!editable && (label != null)">{{label||'empty'}}</label>
<label [ngClass]="{'ui-dropdown-label ui-inputtext ui-corner-all':true,'ui-dropdown-label-empty':(label == null || label.length === 0)}" *ngIf="!editable && (label != null)">
<ng-container *ngIf="!selectedItemTemplate">{{label||'empty'}}</ng-container>
<ng-template [pTemplateWrapper]="selectedItemTemplate" [item]="selectedOption" *ngIf="selectedItemTemplate"></ng-template>
</label>
<label [ngClass]="{'ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder':true,'ui-dropdown-label-empty': (placeholder == null || placeholder.length === 0)}" *ngIf="!editable && (label == null)">{{placeholder||'empty'}}</label>
<input #editableInput type="text" [attr.aria-label]="selectedOption ? selectedOption.label : ' '" class="ui-dropdown-label ui-inputtext ui-corner-all" *ngIf="editable" [disabled]="disabled" [attr.placeholder]="placeholder"
(click)="onEditableInputClick($event)" (input)="onEditableInputChange($event)" (focus)="onEditableInputFocus($event)" (blur)="onInputBlur($event)">
Expand Down Expand Up @@ -146,6 +149,8 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
@ContentChildren(PrimeTemplate) templates: QueryList<any>;

public itemTemplate: TemplateRef<any>;

public selectedItemTemplate: TemplateRef<any>;

selectedOption: any;

Expand Down Expand Up @@ -198,6 +203,10 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
case 'item':
this.itemTemplate = item.template;
break;

case 'selectedItem':
this.selectedItemTemplate = item.template;
break;

default:
this.itemTemplate = item.template;
Expand Down
30 changes: 22 additions & 8 deletions src/app/showcase/components/dropdown/dropdowndemo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ <h3>Editable</h3>

<h3>Content with Filters</h3>
<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
<ng-template let-item pTemplate="selectedItem">
<img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
<span style="vertical-align:middle">{{item.label}}</span>
</ng-template>
<ng-template let-car pTemplate="item">
<div class="ui-helper-clearfix" style="position: relative;height: 25px;">
<img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
Expand Down Expand Up @@ -111,15 +115,21 @@ <h3>Filtering</h3>
</pre>

<h3>Custom Content</h3>
<p>Label of an option is used as the display text of an item by default, for custom content support define a ng-template that gets the SelectItem as the local ng-template variable.</p>
<p>Both the selected option and the options list can be templated to provide customization on the default behavior which is displaying label property of an option. Use
"selectedItem" template to customize the selected label display and the "item" template to change the content of the options in the dropdown panel. Both get
the option instance as the default local template variable.
</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="&#123;'width':'150px'&#125;"&gt;
&lt;ng-template let-car pTemplate="item"&gt;
&lt;div class="ui-helper-clearfix" style="position: relative;height: 25px;"&gt;
&lt;img src="assets/showcase/images/demo/car/&gt;&#123;&#123;car.label&#125;&#125;.gif" style="width:24px;position:absolute;top:1px;left:5px"/&gt;
&lt;div style="font-size:14px;float:right;margin-top:4px"&gt;&#123;&#123;car.label&#125;&#125;&lt;/div&gt;
&lt;/div&gt;
&lt;ng-template let-item pTemplate="selectedItem"&gt;
&lt;img src="assets/showcase/images/demo/car/&#123;&#123;item.label&#125;&#125;.png" style="width:16px;vertical-align:middle" /&gt;
&lt;span style="vertical-align:middle"&gt;&#123;&#123;item.label&#125;&#125;&lt;/span&gt;
&lt;/ng-template&gt;
&lt;ng-template let-car pTemplate="item"&gt;
&lt;div class="ui-helper-clearfix" style="position: relative;height:25px;"&gt;
&lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.label&#125;&#125;.png" style="width:24px;position:absolute;top:1px;left:5px"/&gt;
&lt;div style="font-size:14px;float:right;margin-top:4px"&gt;&#123;&#123;car.label&#125;&#125;&lt;/div&gt; &lt;/div&gt;
&lt;/ng-template&gt;
&lt;/p-dropdown&gt;
</code>
Expand Down Expand Up @@ -462,10 +472,14 @@ <h3>Dependencies</h3>

&lt;h3&gt;Content with Filters&lt;/h3&gt;
&lt;p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="&#123;'width':'150px'&#125;" filter="true"&gt;
&lt;ng-template let-item pTemplate="selectedItem"&gt;
&lt;img src="assets/showcase/images/demo/car/&#123;&#123;item.label&#125;&#125;.png" style="width:16px;vertical-align:middle" /&gt;
&lt;span style="vertical-align:middle"&gt;&#123;&#123;item.label&#125;&#125;&lt;/span&gt;
&lt;/ng-template&gt;
&lt;ng-template let-car pTemplate="item"&gt;
&lt;div class="ui-helper-clearfix" style="position: relative;height: 25px;"&gt;
&lt;img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/&gt;
&lt;div style="font-size:14px;float:right;margin-top:4px"&gt;{{car.label}}&lt;/div&gt;
&lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.label&#125;&#125;.png" style="width:24px;position:absolute;top:1px;left:5px" /&gt;
&lt;div style="font-size:14px;float:right;margin-top:4px"&gt;&#123;&#123;car.label&#125;&#125;&lt;/div&gt;
&lt;/div&gt;
&lt;/ng-template&gt;
&lt;/p-dropdown&gt;
Expand Down

0 comments on commit 20a5676

Please sign in to comment.