AngularJS编辑进度条为html滑块

Question

我有一个bootstrap进度条，我希望能够通过鼠标单击来编辑该值。与为html范围滑块

编辑它的方式相同

<input type="range" min="1" max="100" value="50" class="slider" id="myRange">

所以我想通过鼠标点击对进度条进行相同的控制

Answer 1

好吧，实际上我最后想到的要容易得多。我已经为progressBar使用了bootstrap angular指令并处理了onClick事件。

控制器：

  $ctrl.trackProgress = function(event) { 
      var fullProgressBarWidth = $(event.currentTarget).width();
      $ctrl.progressBarValue = event.offsetX / fullProgressBarWidth * 100;        
  };

模板：

<div class="progress" ng-click="$ctrl.trackProgress($event)">
  <uib-progressbar value="$ctrl.progressBarValue">{{$ctrl.progressBarValue}}</uib-progressbar>
</div>