Skip to content

Commit

Permalink
feat(module:select): support custom option template (#689)
Browse files Browse the repository at this point in the history
close #227
  • Loading branch information
vthinkxie authored Dec 6, 2017
1 parent c22dad3 commit d76763c
Show file tree
Hide file tree
Showing 7 changed files with 108 additions and 3 deletions.
4 changes: 3 additions & 1 deletion src/components/select/nz-option.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import {
ViewEncapsulation,
Input,
OnDestroy,
OnInit
OnInit,
ContentChild
} from '@angular/core';

import { NzSelectComponent } from './nz-select.component';
Expand All @@ -22,6 +23,7 @@ export class NzOptionComponent implements OnDestroy, OnInit {

_value: string;
_label: string;
@ContentChild('nzOptionTemplate') nzOptionTemplate;

@Input()
set nzValue(value: string) {
Expand Down
8 changes: 7 additions & 1 deletion src/components/select/nz-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,13 @@ import { NzLocaleService } from '../locale/index';
[class.ant-select-dropdown-menu-item-selected]="(option.nzValue==(_selectedOption?.nzValue))||(isInSet(_selectedOptions,option))"
class="ant-select-dropdown-menu-item"
(click)="clickOption(option,$event)">
{{option.nzLabel}}
<ng-template
*ngIf="option.nzOptionTemplate"
[ngTemplateOutlet]="option.nzOptionTemplate">
</ng-template>
<ng-template [ngIf]="!option.nzOptionTemplate">
{{option.nzLabel}}
</ng-template>
</li>
</ul>
</div>
Expand Down
47 changes: 47 additions & 0 deletions src/showcase/nz-demo-select/nz-demo-select-pagination.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { Component, OnInit } from '@angular/core';

@Component({
selector: 'nz-demo-select-pagination',
template: `
<nz-select style="width: 120px;" [(ngModel)]="selectedOption" (nzScrollToBottom)="scrollToBottom()">
<nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option">
</nz-option>
<nz-option [nzLabel]="'disabled'" [nzDisabled]="true" [nzValue]="'disabled'" *ngIf="loading">
<ng-template #nzOptionTemplate>
<i class="anticon anticon-loading anticon-spin"></i> Loading...
</ng-template>
</nz-option>
</nz-select>
`,
styles : []
})
export class NzDemoSelectPaginationComponent implements OnInit {
options = [];
selectedOption;
loading = false;
index = 0;

scrollToBottom() {
if (!this.loading) {
this.loading = true;
setTimeout(() => {
this.generateFakeData();
this.loading = false;
}, 3000);
}
}

generateFakeData() {
for (let i = 0; i < 5; i++) {
this.options.push({ value: this.index, label: `option${this.index}` });
this.index++;
}
}

ngOnInit() {
this.generateFakeData();
this.selectedOption = this.options[ 0 ];
}
}


28 changes: 28 additions & 0 deletions src/showcase/nz-demo-select/nz-demo-select-template.component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { Component } from '@angular/core';

@Component({
selector: 'nz-demo-select-template',
template: `
<nz-select style="width: 120px;" [(ngModel)]="selectedOption" nzAllowClear>
<nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option">
<ng-template #nzOptionTemplate><i class="anticon" [ngClass]="'anticon-'+option.label"></i> {{option.label}}</ng-template>
</nz-option>
</nz-select>
`,
styles : []
})
export class NzDemoSelectTemplateComponent {
options = [
{ value: 'android', label: 'android' },
{ value: 'apple', label: 'apple' },
{ value: 'windows', label: 'windows' },
{ value: 'ie', label: 'ie' },
{ value: 'chrome', label: 'chrome' },
{ value: 'github', label: 'github' },
{ value: 'aliwangwang', label: 'aliwangwang' },
{ value: 'dingding', label: 'dingding' },
];
selectedOption = this.options[ 0 ];
}


2 changes: 2 additions & 0 deletions src/showcase/nz-demo-select/nz-demo-select.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import {Component, ViewEncapsulation} from '@angular/core';
})
export class NzDemoSelectComponent {
NzDemoSelectBasicCode = require('!!raw-loader!./nz-demo-select-basic.component');
NzDemoSelectTemplateCode = require('!!raw-loader!./nz-demo-select-template.component');
NzDemoSelectPaginationCode = require('!!raw-loader!./nz-demo-select-pagination.component');
NzDemoSelectSizeCode = require('!!raw-loader!./nz-demo-select-size.component');
NzDemoSelectSearchCode = require('!!raw-loader!./nz-demo-select-search.component');
NzDemoSelectMultipleCode = require('!!raw-loader!./nz-demo-select-multiple.component');
Expand Down
18 changes: 18 additions & 0 deletions src/showcase/nz-demo-select/nz-demo-select.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
<p>tags select,随意输入的内容,回车键新增tag</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'下拉模板'" id="components-select-demo-template" [nzCode]="NzDemoSelectTemplateCode">
<nz-demo-select-template demo></nz-demo-select-template>
<div intro>
<p>可以通过 <code>#nzOptionTemplate</code> 来定制下拉选项模板</p>
</div>
</nz-code-box>
</div>
<div nz-col [nzSpan]="12">
<nz-code-box [nzTitle]="'三种大小'" id="components-select-demo-size" [nzCode]="NzDemoSelectSizeCode">
Expand All @@ -54,6 +60,12 @@ <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" titl
<p>多选搜索框和远程数据结合,注意此时需要保留未列在当前选项中但已被加入多选框中的数据,需要添加 <code>nzKeepUnListOptions</code>属性</p>
</div>
</nz-code-box>
<nz-code-box [nzTitle]="'滚动加载'" id="components-select-demo-pagination" [nzCode]="NzDemoSelectPaginationCode">
<nz-demo-select-pagination demo></nz-demo-select-pagination>
<div intro>
<p>利用 <code>nzScrollToBottom</code> 滚动到底部时动态加载选项</p>
</div>
</nz-code-box>
</div>
</div>
<section class="markdown api-container">
Expand Down Expand Up @@ -179,6 +191,12 @@ <h3 id="Option props"><span>nz-option</span>
<td>String</td>
<td></td>
</tr>
<tr>
<td>#nzOptionTemplate</td>
<td>用于定制下拉部分option的显示</td>
<td>ng-template</td>
<td></td>
</tr>
<tr>
<td>nzValue</td>
<td>option的value值,与nz-select选择option后的ngModel属性对应</td>
Expand Down
4 changes: 3 additions & 1 deletion src/showcase/nz-demo-select/nz-demo-select.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { FormsModule } from '@angular/forms';
import { JsonpModule } from '@angular/http';

import { NzDemoSelectBasicComponent } from './nz-demo-select-basic.component';
import { NzDemoSelectTemplateComponent } from './nz-demo-select-template.component';
import { NzDemoSelectPaginationComponent } from './nz-demo-select-pagination.component';
import { NzDemoSelectSizeComponent } from './nz-demo-select-size.component';
import { NzDemoSelectSearchComponent } from './nz-demo-select-search.component';
import { NzDemoSelectSearchChangeComponent } from './nz-demo-select-search-change.component';
Expand All @@ -18,7 +20,7 @@ import { NzDemoSelectRoutingModule } from './nz-demo-select.routing.module';

@NgModule({
imports : [ NzDemoSelectRoutingModule, CommonModule, NzCodeBoxModule, NgZorroAntdModule, FormsModule, JsonpModule ],
declarations: [ NzDemoSelectBasicComponent, NzDemoSelectSizeComponent, NzDemoSelectSearchComponent, NzDemoSelectMultipleComponent, NzDemoSelectTagComponent, NzDemoSelectComponent, NzDemoSelectSearchChangeComponent, NzDemoSelectMultipleChangeComponent ],
declarations: [ NzDemoSelectTemplateComponent, NzDemoSelectPaginationComponent, NzDemoSelectBasicComponent, NzDemoSelectSizeComponent, NzDemoSelectSearchComponent, NzDemoSelectMultipleComponent, NzDemoSelectTagComponent, NzDemoSelectComponent, NzDemoSelectSearchChangeComponent, NzDemoSelectMultipleChangeComponent ],
})
export class NzDemoSelectModule {

Expand Down

0 comments on commit d76763c

Please sign in to comment.