feat(module:slider): support dynamic update nzMarks from outside (#636)

close #624
NG-ZORRO · Nov 29, 2017 · aea80c4 · aea80c4
1 parent d2fc97d
commit aea80c4
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 19 deletions.
diff --git a/src/components/slider/nz-slider-marks.component.ts b/src/components/slider/nz-slider-marks.component.ts
@@ -14,25 +14,34 @@ export class NzSliderMarksComponent implements OnInit, OnChanges {
   // Dynamic properties
   @Input() nzLowerBound: number = null;
   @Input() nzUpperBound: number = null;
+  @Input() nzMarksArray: MarksArray;
 
   // Static properties
   @Input() nzClassName: string;
   @Input() nzVertical: boolean; // Required
-  @Input() nzMarksArray: MarksArray; // Required
   @Input() nzMin: number; // Required
   @Input() nzMax: number; // Required
   @Input() nzIncluded: boolean;
 
   attrs; // points for inner use
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.nzLowerBound || changes.nzUpperBound) {
+    if (changes.nzMarksArray) {
+      this.buildAttrs();
+    }
+    if (changes.nzMarksArray || changes.nzLowerBound || changes.nzUpperBound) {
       this.togglePointActive();
     }
   }
 
-  ngOnInit() {
-    const { nzVertical, nzClassName, nzMarksArray, nzMin, nzMax, nzLowerBound, nzUpperBound } = this;
+  ngOnInit() {}
+
+  trackById(index: number, attr) {
+    return attr.id;
+  }
+
+  buildAttrs() {
+    const { nzVertical, nzClassName, nzMarksArray, nzMin, nzMax } = this;
     const range = nzMax - nzMin;
     this.attrs = nzMarksArray.map(mark => {
       const { value, offset, config } = mark;
@@ -72,11 +81,6 @@ export class NzSliderMarksComponent implements OnInit, OnChanges {
         label  : label
       };
     }); // END - map
-    this.togglePointActive();
-  }
-
-  trackById(index: number, attr) {
-    return attr.id;
   }
 
   togglePointActive() {

diff --git a/src/components/slider/nz-slider-step.component.ts b/src/components/slider/nz-slider-step.component.ts
@@ -15,22 +15,31 @@ export class NzSliderStepComponent implements OnInit, OnChanges {
   // Dynamic properties
   @Input() nzLowerBound: number = null;
   @Input() nzUpperBound: number = null;
+  @Input() nzMarksArray: any[];
 
   // Static properties
   @Input() nzPrefixCls: string;
   @Input() nzVertical: boolean;
-  @Input() nzMarksArray: any[];
   @Input() nzIncluded: boolean;
 
   attrs;
 
   ngOnChanges(changes: SimpleChanges) {
-    if (changes.nzLowerBound || changes.nzUpperBound) {
+    if (changes.nzMarksArray) {
+      this.buildAttrs();
+    }
+    if (changes.nzMarksArray || changes.nzLowerBound || changes.nzUpperBound) {
       this.togglePointActive();
     }
   }
 
-  ngOnInit() {
+  ngOnInit() {}
+
+  trackById(index: number, attr) {
+    return attr.id;
+  }
+
+  buildAttrs() {
     const orient = this.nzVertical ? 'bottom' : 'left', prefixCls = this.nzPrefixCls;
     this.attrs = this.nzMarksArray.map(mark => {
       const { value, offset } = mark;
@@ -47,11 +56,6 @@ export class NzSliderStepComponent implements OnInit, OnChanges {
         }
       };
     });
-    this.togglePointActive();
-  }
-
-  trackById(index: number, attr) {
-    return attr.id;
   }
 
   togglePointActive() {

diff --git a/src/components/slider/nz-slider.component.ts b/src/components/slider/nz-slider.component.ts
@@ -250,10 +250,12 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const { nzDisabled } = changes;
+    const { nzDisabled, nzMarks } = changes;
     if (nzDisabled && !nzDisabled.firstChange) {
       this.toggleDragDisabled(nzDisabled.currentValue);
       this.setClassMap();
+    } else if (nzMarks && !nzMarks.firstChange) {
+      this.marksArray = this.nzMarks ? this.toMarksArray(this.nzMarks) : null;
     }
   }
 

diff --git a/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts b/src/showcase/nz-demo-slider/nz-demo-slider-mark.component.ts
@@ -14,6 +14,7 @@ import { Component } from '@angular/core';
       <h4>step=null || dots=true</h4>
       <nz-slider [nzMarks]="marks" [nzStep]="null" [nzDefaultValue]="37"></nz-slider>
       <nz-slider [nzMarks]="marks" [nzDots]="true" [nzDefaultValue]="37"></nz-slider>
+      Change nzMarks dynamically: <button nz-button (click)="changeMarks()">Change nzMarks</button>
     </div>
   `,
   styles  : [ `
@@ -28,7 +29,7 @@ import { Component } from '@angular/core';
 })
 export class NzDemoSliderMarkComponent {
 
-  marks = {
+  marks: any = {
     0  : '0°C',
     26 : '26°C',
     37 : '37°C',
@@ -40,4 +41,11 @@ export class NzDemoSliderMarkComponent {
     }
   };
 
+  changeMarks() {
+    this.marks = {
+      20: '20%',
+      99: '99%',
+    };
+  }
+
 }