javascript - CSS - 纯 CSS + AngularJS 中的旋钮光标

Question

在试用了 jQuery Knob 框架之后，我意识到很难使用 AngularJS 动态值，因此决定在纯 CSS 中制作我自己的弧形/旋钮。

在旋钮中，我代表了 3 个值:最小值、最大值和当前值，它们都应该是动态的。当值超出其范围时，旋钮的颜色会发生变化。

HTML:

<div class="{{getColor()}} arc arc_start"></div>

JS:

function getColor(){
if($scope.value > $scope.maximum){
  return "arc_danger";
}
if($scope.value < $scope.minimum){
  return "arc_gray";
}
return "arc_success";
}

现在，如果该值在范围内，我想使用一个小旋钮光标来说明它，类似于 jQuery Knob 中实现的那个。

这是指向 plunkr 的链接，它说明了我想要实现的目标。 http://plnkr.co/edit/Zb8bVih4hireLwNS3bfc?p=preview

Answer 1

我喜欢这个想法，但我认为您不应该在不使用 JQuery 的全部功能的情况下完全放弃使用它。我已将您的 JQuery 旋钮更新为动态的。

plnkr link

$('.knob').on("input", function() {
      $scope.value = $('#value').val();
      $scope.minimum = $('#min').val();
      $scope.maximum = $('#max').val();
      $('.dial').val($scope.value);
      $('.dial').trigger('change');
      $('.dial').trigger('configure', {'min': $scope.minimum,'max':$scope.maximum,'fgColor':getColor()}); 
});

我不确定在彼此之上使用两个 div 是否是答案。如果您确实无法使用其功能来满足您的需求，或许可以考虑使用圆形进度条。

SO question link

jsfiddle link

希望这对您有所帮助。