AngularJS滑塊 - 使用超時更新標籤？

我想用AngularJS滑塊滑過某些日期/時間點。更具體地說，我使用可拖動範圍的那個，這裏演示的演示 - https://jsfiddle.net/ValentinH/954eve2L/AngularJS滑塊 - 使用超時更新標籤？

這些值來自後端，它們在特定的時間間隔被拉出。我將日期時間值存儲在數組中 - dateTimeArray。我假設在UI上的滑塊上的標籤（日期/時間點）應該自動更新，當日期/時間值在控制器內的dateTimeArray中更新時，但它們不是。任何幫助表示讚賞。

HTML

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

   $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]); 
         } 

        } 
       };

來源

2016-07-22 user2217057

我發現了一個不同的路徑來更新滑塊值，雖然初始版本可以具有溶液太。事實證明，只使用滑塊選項中的stepsArray而不是translate，解決了我的問題。看起來像使用非數字值（如日期或字符串），stepsArray自動完成工作，只要數組本身更新，它就會更新前端的值。

$scope.slider = { 

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

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

        // no need for translate block 

       } 
      };

來源

2016-07-24 03:01:38 user2217057

我刪除了我之前的回答，因爲您編輯了該問題。

確實，對於您的使用案例，您可以直接使用stepsArray選項，該選項正是爲此目的而實施的。此外，你的情況，你可能想使用bindIndexForStepsArray這使您可以設置索引是minvalue/maxValue（最大值），而不是數組值：http://jsfiddle.net/vphbr1ht/

在另一方面，你使用，你第一種方法應該叫做

$scope.$broadcast('rzSliderForceRender')

強制刷新滑塊：http://jsfiddle.net/omhwvozb/。

來源

2016-07-24 10:02:44 ValentinH

AngularJS滑塊 - 使用超時更新標籤？

回答

相關問題