feat(module:select): support custom option template (#689)

close #227
NG-ZORRO · Dec 6, 2017 · d76763c · d76763c
1 parent c22dad3
commit d76763c
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 3 deletions.
diff --git 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
@@ -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>

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
@@ -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 ];
+  }
+}
+
+
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
@@ -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 ];
+}
+
+
diff --git 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
@@ -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">
@@ -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">
@@ -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>

diff --git 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 {