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。对于你的情况，在每个新值添加到数组后，您可以通过第一次删除它来重新加载滑块＆amp;然后重新加载它。或者您可以使用他们的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 Example。

在范围滑块角度中添加json数组响应

1 个答案: