时间戳

首页 > 解决方案 > 在范围滑块角度中添加 json 数组响应

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

问题描述

我收到了这样的 json 响应。它是动态的，我想在范围滑块中添加细节。当数组中有新元素时，滑块最大值必须动态增加。

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

我以前从未在滑块上工作过。任何建议如何实现这一目标？

标签： arraysangularjsslider

解决方案

您可以使用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 示例。

推荐阅读