AngularJS Slider - Aktualisieren von Etiketten mit Timeout?

Question

Ich versuche den AngularJS-Schieberegler zu verwenden, um durch einige Datums-/Zeitpunkte zu gleiten. Genauer gesagt verwende ich den mit ziehbarem Bereich, die hier vorgestellte Demo - https://jsfiddle.net/ValentinH/954eve2L/

Die Werte kommen vom Backend und werden in bestimmten Zeitabständen gezogen. Ich speichere Datetime-Werte in einem Array - dateTimeArray. Ich ging davon aus, dass die Beschriftungen (Datum/Zeitpunkte) auf dem Slider auf der Benutzeroberfläche automatisch aktualisiert werden sollten, wenn die Datums-/Uhrzeitwerte in dateTimeArray innerhalb des Controllers aktualisiert werden, aber nicht. Jede Hilfe wird geschätzt.

HTML

  <rzslider 
       rz-slider-model="slider.minValue" 
       rz-slider-high="slider.maxValue" 
       rz-slider-options="slider.options"> 
      </rzslider> 

JS

   $scope.slider = { 

        minValue: dateTimeArray.length - 10, 
        maxValue: dateTimeArray.length - 5, 

        options: { 
         floor: 0, 
         ceil: dateTimeArray.length - 1, 

         draggableRange: true, 

         translate: function (value) { 
          return (dateTimeArray[value]); 
         } 

        } 
       }; 

Answer 1

fand ich einen anderen Weg der Schieber Werte zu aktualisieren, auch wenn die erste Version zu einer Lösung haben kann. Es stellte sich heraus, dass die Verwendung von StepsArray in Slider-Optionen anstelle von translate mein Problem löste. Es scheint so, als ob bei nicht numerischen Werten, wie Daten oder Strings, stepsArray automatisch die Arbeit erledigt, es aktualisiert die Werte am Frontend, wenn das Array selbst aktualisiert wird.

$scope.slider = { 

       minValue: dateTimeArray[3], // some min value, for example 
       maxValue: dateTimeArray[7], // some max value 

       options: { 
        ..... 
        stepsArray :dateTimeArray, 
        ........ 

        // no need for translate block 

       } 
      }; 

Answer 2

Ich habe meine vorherige Antwort gelöscht, weil Sie die Frage bearbeitet haben.

In der Tat, für Ihren Anwendungsfall können Sie direkt die stepsArray Option verwenden, die genau für diesen Zweck implementiert wurde. Auch in Ihrem Fall sollten Sie die bindIndexForStepsArray verwenden, die Sie den Index als minValue/maxValue anstelle des Array-Wert festlegen können: http://jsfiddle.net/vphbr1ht/

Auf der anderen Seite, mit der ersten Methode, die Sie verwendet haben, Sie http://jsfiddle.net/omhwvozb/: sollte

$scope.$broadcast('rzSliderForceRender') 

zu zwingen, den Schieber zu aktualisieren genannt.