角引导滑块 - 关于停止执行功能 [英] Angular Bootstrap Slider - on stop execute function
本文介绍了角引导滑块 - 关于停止执行功能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下的code创建一个滑块：
I have the following code for creating a slider:
<html ng-app="angular-bootstrap-slider-test">
<head>
<title>Angular Bootstrap Slider test</title>
<script data-require="angular.js@1.3.0" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="bootstrap.css" rel="stylesheet" />
<link href="bootstrap-slider.css" rel="stylesheet" />
</head>
<body ng-controller="TestCtrl">
<div class="col-md-2 col-md-offset-2">
<slider on-stop-slide="executeMe();" ng-model="sliders.sliderValue" min="{{testOptions.min}}" step="{{testOptions.step}}" max="{{testOptions.max}}"></slider>
{{myFormater(sliders.sliderValue)}}
</div>
<script type="text/javascript" src="bootstrap-slider.js"></script>
<!-- angular-slider include -->
<script type="text/javascript" src="slider.js"></script>
<!-- test file include -->
<script src="app.js">
</script>
angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider'])
.controller('TestCtrl', ['$scope', function($scope) {
$scope.sliders = {};
$scope.sliders.sliderValue = 50;
$scope.testOptions = {
min: 0,
max: 100,
step: 1,
};
$scope.sliders.thirdSliderValue = 0;
$scope.myFormater = function(value) {
return value + "%";
}
$scope.executeMe = function() {
console.log('done');
}
}]);
我尝试没有成功做的是当用户finishis到移动滑块来执行功能。
What i'm trying to do with no success is to execute a function when the user finishis to to move the slider
这里是plunker的code：
here is the code on plunker:
http://plnkr.co/edit/iULltHh0fRAbvuoFu84t?p=$p$ PVIEW
配发
阿维
推荐答案
您可以使用 ngMouseup 的为。
<div class="col-md-2 col-md-offset-2" ng-mouseup="executeMe()">
<slider ng-model="sliders.sliderValue" min="{{testOptions.min}}" step="{{testOptions.step}}" max="{{testOptions.max}}"></slider>
{{myFormater(sliders.sliderValue)}}
</div>
下面的您plunkr 修改展示。
更新
一个不同的方法将是 $观看滑块的价值。您可以设置超时这样你就不会触发功能的同时滑动，但只有当值没有改变一段时间。
A different approach will be to $watch the slider's value. You can set a timeout so you don't trigger your function while sliding, but only when the value has not changed for some time.
var timeout;
$scope.$watch('sliders.sliderValue', function() {
if (timeout) {
$timeout.cancel(timeout);
}
timeout = $timeout($scope.executeMe,200);
});
请参阅例如
这篇关于角引导滑块 - 关于停止执行功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
