AngularJS编辑进度条为html滑块

问题描述：

我有一个引导进度条，我希望能够用鼠标点击编辑值。你可以编辑它的HTML范围滑块AngularJS编辑进度条为html滑块

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

同样的方式，所以我想有进度条同一控制用鼠标点击

开发自定义指令 –

感谢我用引导angularjs指令，并在控制器中创建我自己的处理方式。 – Edalol

答

好吧其实这是很容易转念一想到底。我已经使用bootstrap angular指令处理progressBar并处理了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>

AngularJS编辑进度条为html滑块

相关推荐