Question

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

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

HTML：

self.navigationItem.hidesBackButton = false

JS：

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

现在，如果值在该范围内，我想用一个小旋钮光标来说明它，类似于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

希望这有帮助。

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

1 个答案: