Question

找到一个适用于ng-repeat的范围滑块似乎是一项不可能完成的任务，可以垂直显示。任何人都有关于接下来要尝试什么的想法？

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

我最接近的是使用了angular-rangelider但是当与ng-repeat一起使用时，它变得非常错误。我想我可以手动写出所有25个，但我不愿意。

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

Answer 1

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绑定可以正常工作。 Here's a Plunker

Supported browsers look to be IE10+ and most others

Answer 2

我在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的旋转使其垂直。请注意，您必须定义一个比＆＃34;输入＆＃34;

更好的css选择器

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

希望有所帮助

有没有其他人有角度和范围滑块的问题？

2 个答案: