Добавление отклика массива json в угловое ползунок диапазона

Question

Я получил ответ JSON, как это.Это динамично, и я хочу добавить детали в ползунок диапазона.Максимальное значение слайдера должно динамически увеличиваться при появлении нового элемента в массиве.

"time": [
        "2018-05-24T06:30:00",
        "2018-05-24T07:00:00",
        "2018-05-24T07:30:00"
]

Я никогда раньше не работал над слайдером.Любое предложение, как этого добиться?

Answer 1

Вы можете использовать библиотеку angularjs-slider (которая имеет ui-bootstrap в качестве зависимости).Он предлагает много настроек в ползунках и очень удобно с angularjs.Для вашего случая после каждого нового значения, добавленного в массив, вы можете перезагрузить слайдер, сначала удалив его, а затем снова загрузив.Или вы можете использовать их rzSliderForceRender пользовательское событие для этого.Используя это

Ваш HTML будет выглядеть следующим образом:

<rzslider rz-slider-model="slider_dates.value"
          rz-slider-options="slider_dates.options"></rzslider>

А в коде конфигурации ползунка контроллера:

$scope.dates = ["2018-05-24T06:30:00",
  "2018-05-24T07:00:00"];
var datesObjests = [];
for (var i = 0; i < $scope.dates.length; i++) {
  datesObjests.push(new Date($scope.dates[i]));
}
$scope.slider_dates = {
  value: datesObjests[0],
  options: {
    stepsArray: datesObjests,
    translate: function(date) {
      if (date !== null) return date.toLocaleString();
      return '';
    },
  },
};

Работает Пример Plunker по вашему требованию.