feat(module:select): support nzScrollToBottom event (#678)

close #676
NG-ZORRO · Dec 6, 2017 · b7cc148 · b7cc148
1 parent 05c1f87
commit b7cc148
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/components/select/nz-select.component.ts b/src/components/select/nz-select.component.ts
@@ -130,7 +130,7 @@ import { NzLocaleService } from '../locale/index';
       <div
         [ngClass]="_dropDownClassMap" [@dropDownAnimation]="_dropDownPosition">
         <div style="overflow: auto;">
-          <ul class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root" #dropdownUl>
+          <ul class="ant-select-dropdown-menu ant-select-dropdown-menu-vertical ant-select-dropdown-menu-root" #dropdownUl (scroll)="dropDownScroll(dropdownUl)">
             <li
               *ngFor="let option of _filterOptions"
               [class.ant-select-dropdown-menu-item-disabled]="option.nzDisabled"
@@ -190,6 +190,7 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
   @ViewChild('dropdownUl') dropdownUl: ElementRef;
   @Output() nzSearchChange: EventEmitter<any> = new EventEmitter();
   @Output() nzOpenChange: EventEmitter<any> = new EventEmitter();
+  @Output() nzScrollToBottom: EventEmitter<any> = new EventEmitter();
   @Input() nzFilter = true;
   @Input() nzMaxMultiple = Infinity;
 
@@ -309,6 +310,11 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
     this._isOpen = isOpen;
     this.nzOpenChange.emit(this._isOpen);
     this.setClassMap();
+    if (this._isOpen) {
+      setTimeout(() => {
+        this.checkDropDownScroll();
+      });
+    }
   }
 
   get nzOpen(): boolean {
@@ -716,6 +722,18 @@ export class NzSelectComponent implements OnInit, AfterContentInit, AfterContent
     this.nzDisabled = isDisabled;
   }
 
+  dropDownScroll(ul) {
+    if (ul && (ul.scrollHeight - ul.scrollTop === ul.clientHeight)) {
+      this.nzScrollToBottom.emit(true);
+    }
+  }
+
+  checkDropDownScroll() {
+    if (this.dropdownUl && (this.dropdownUl.nativeElement.scrollHeight === this.dropdownUl.nativeElement.clientHeight)) {
+      this.nzScrollToBottom.emit(true);
+    }
+  }
+
   constructor(private _elementRef: ElementRef, private _renderer: Renderer2, private _locale: NzLocaleService) {
     this._el = this._elementRef.nativeElement;
   }

diff --git a/src/showcase/nz-demo-select/nz-demo-select.html b/src/showcase/nz-demo-select/nz-demo-select.html
@@ -134,6 +134,12 @@ <h3 id="Select props"><span>nz-select</span>
           <td>attribute</td>
           <td>-</td>
         </tr>
+        <tr>
+          <td>nzScrollToBottom</td>
+          <td>下拉菜单滚动到底部回调，可用于作为动态加载的触发条件</td>
+          <td>-</td>
+          <td>-</td>
+        </tr>
         <tr>
           <td>nzPlaceHolder</td>
           <td>选择框默认文字</td>