diff --git a/src/components/select/nz-option.component.ts b/src/components/select/nz-option.component.ts
index 962e7c5eb0..549f914793 100644
--- a/src/components/select/nz-option.component.ts
+++ b/src/components/select/nz-option.component.ts
@@ -3,7 +3,8 @@ import {
ViewEncapsulation,
Input,
OnDestroy,
- OnInit
+ OnInit,
+ ContentChild
} from '@angular/core';
import { NzSelectComponent } from './nz-select.component';
@@ -22,6 +23,7 @@ export class NzOptionComponent implements OnDestroy, OnInit {
_value: string;
_label: string;
+ @ContentChild('nzOptionTemplate') nzOptionTemplate;
@Input()
set nzValue(value: string) {
diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts
index e852bee560..11f521e4ef 100644
--- a/src/components/select/nz-select.component.ts
+++ b/src/components/select/nz-select.component.ts
@@ -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}}
+
+
+
+ {{option.nzLabel}}
+
diff --git a/src/showcase/nz-demo-select/nz-demo-select-pagination.component.ts b/src/showcase/nz-demo-select/nz-demo-select-pagination.component.ts
new file mode 100644
index 0000000000..43ce9001d4
--- /dev/null
+++ b/src/showcase/nz-demo-select/nz-demo-select-pagination.component.ts
@@ -0,0 +1,47 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-select-pagination',
+ template: `
+
+
+
+
+
+ Loading...
+
+
+
+ `,
+ 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 ];
+ }
+}
+
+
diff --git a/src/showcase/nz-demo-select/nz-demo-select-template.component.ts b/src/showcase/nz-demo-select/nz-demo-select-template.component.ts
new file mode 100644
index 0000000000..3528eb1830
--- /dev/null
+++ b/src/showcase/nz-demo-select/nz-demo-select-template.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'nz-demo-select-template',
+ template: `
+
+
+ {{option.label}}
+
+
+ `,
+ 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 ];
+}
+
+
diff --git a/src/showcase/nz-demo-select/nz-demo-select.component.ts b/src/showcase/nz-demo-select/nz-demo-select.component.ts
index 2c9a167230..6f20defc64 100644
--- a/src/showcase/nz-demo-select/nz-demo-select.component.ts
+++ b/src/showcase/nz-demo-select/nz-demo-select.component.ts
@@ -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');
diff --git a/src/showcase/nz-demo-select/nz-demo-select.html b/src/showcase/nz-demo-select/nz-demo-select.html
index 369d4bcb08..1a0d6950e8 100644
--- a/src/showcase/nz-demo-select/nz-demo-select.html
+++ b/src/showcase/nz-demo-select/nz-demo-select.html
@@ -34,6 +34,12 @@
代码演示tags select,随意输入的内容,回车键新增tag
+
+
+
+
可以通过 #nzOptionTemplate
来定制下拉选项模板
+
+
@@ -54,6 +60,12 @@ 代码演示多选搜索框和远程数据结合,注意此时需要保留未列在当前选项中但已被加入多选框中的数据,需要添加 nzKeepUnListOptions
属性
+
@@ -179,6 +191,12 @@ nz-option
String |
|
+
+ #nzOptionTemplate |
+ 用于定制下拉部分option的显示 |
+ ng-template |
+ |
+
nzValue |
option的value值,与nz-select选择option后的ngModel属性对应 |
diff --git a/src/showcase/nz-demo-select/nz-demo-select.module.ts b/src/showcase/nz-demo-select/nz-demo-select.module.ts
index c773dac2f3..a4a9874939 100644
--- a/src/showcase/nz-demo-select/nz-demo-select.module.ts
+++ b/src/showcase/nz-demo-select/nz-demo-select.module.ts
@@ -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';
@@ -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 {