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属性

+ + +
+

利用 nzScrollToBottom 滚动到底部时动态加载选项

+
+
@@ -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 {