其他人有沒有角度和範圍滑塊的麻煩？

似乎是一個不可能完成的任務，可以找到一個與ng-repeat配合使用並且可以垂直顯示的範圍滑塊。任何人都有關於下一步嘗試的想法？其他人有沒有角度和範圍滑塊的麻煩？

我試圖做一個讓你可以在一天中的每個小時手動控制標誌亮度的地方。目前的想法是堆疊24個垂直範圍滑塊彼此相鄰，每個滑塊控制當時的亮度，第25個滑塊是一個主控制器，可同時調整所有其他24個滑塊。

我最接近的是角度滑行滑板，但是當它與ng-repeat一起使用時，它變得非常麻煩。我想我可以手動寫出所有25個，但我寧願不要。

另一個想法是使用jqPlot，因爲您可以拖動數據點。（它似乎是唯一的圖表庫，您可以在其中拖動數據點（請糾正我，如果我錯了））

來源

2015-06-19 ds011591

如果他們沒有很好地工作，你的事情的問題可能是什麼，他們都有一個共同特點？（換句話說，可能是一個實施問題？） –

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; 
}

正常工作與角綁定。 Here's a Plunker。

Supported browsers look to be IE10+ and most others。

來源

2015-06-19 15:24:11 Agop

我的我怎麼會用這個

創建空對象的數組plunker作了爲例。

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

我使用顯示HTML使用範圍的輸入

<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，使其垂直它NG重複。請注意，您必須定義一個更好的CSS選擇器不是「輸入」

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

希望它幫助

來源

2015-06-19 15:26:20 Okazari

其他人有沒有角度和範圍滑塊的麻煩？

回答

相關問題