0

找到一个与 ng-repeat 配合得很好并且可以垂直显示的范围滑块似乎是一项不可能完成的任务。有人对接下来要尝试什么有想法吗？

我正在尝试拍摄一个您可以在一天中的每个小时手动控制标志亮度的镜头。当前的想法是将 24 个垂直范围滑块彼此相邻堆叠，其中每个滑块控制该小时的亮度，第 25 个滑块是同时调整所有其他 24 个滑块的主控件。

我最接近的是 angular-rangeslider，但当与 ng-repeat 一起使用时，它出现了令人难以置信的错误。我想我可以手动写出所有 25 个，但我不想这样做。

另一个想法是使用 jqPlot，因为您可以拖动数据点。（它似乎是唯一可以拖动数据点的图表库（如果我错了，请纠正我））

4

2 回答 2

2

HTML5 范围输入怎么样？

HTML：

<input type="range"
    orient="vertical"
    ng-repeat="slider in sliders"
    ng-model="slider.val" />

CSS（在某些浏览器中必须使其垂直）：

input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Webkit */
    width: 20px;
    height: 200px;
}

适用于 Angular 绑定。这是一个 Plunker。

支持的浏览器看起来是 IE10+ 和大多数其他的。

于 2015-06-19T15:24:11.663 回答
0

我在plunker中做了一个例子，说明我将如何使用它

我创建了一个空对象数组。

$scope.sliders = [];
for(var i=0; i<5; i++){
  $scope.sliders.push({});
}

我使用使用 HTML 范围输入的 ng-repeat 显示它

<span ng-repeat="slider in sliders track by $index">
    <input ng-init="slider.value = 0" type="range" ng-model="slider.value">
    {{slider.value}}
  </span>

也许不优雅，但我只是使用 CSS 的旋转使其垂直。请注意，您必须定义比“输入”更好的 CSS 选择器

input {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width:70px;
    height:100px;
}

希望它有所帮助

于 2015-06-19T15:26:20.160 回答