Angular Bootstrap Slider - 停止执行功能 [英] Angular Bootstrap Slider - on stop execute function

查看:21
本文介绍了Angular Bootstrap Slider - 停止执行功能的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有以下用于创建滑块的代码:

 <头><title>Angular Bootstrap Slider 测试</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"><link href="bootstrap.css" rel="stylesheet"/><link href="bootstrap-slider.css" rel="stylesheet"/><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(slider.sliderValue)}}

<script type="text/javascript" src="bootstrap-slider.js"></script><!-- angular-slider 包括--><script type="text/javascript" src="slider.js"></script><!-- 测试文件包含--><script src="app.js">

angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider']).controller('TestCtrl', ['$scope', function($scope) {$scope.sliders = {};$scope.slider.sliderValue = 50;$scope.testOptions = {分钟:0,最大:100,第1步,};$scope.slider.thirdSliderValue = 0;$scope.myFormater = 函数(值){返回值 + "%";}$scope.executeMe = function() {console.log('完成');}}]);

我试图做但没有成功的是在用户完成移动滑块时执行一个函数

这是plunker的代码:

http://plnkr.co/edit/iULltHh0fRAbvuoFu84t?p=preview

感谢分配

阿维

解决方案

您可以使用 ngMouseup为此.

<slider ng-model="slider.sliderValue" min="{{testOptions.min}}" step="{{testOptions.step}}" max="{{testOptions.max}}"></滑块>{{myFormater(slider.sliderValue)}}

这是 您的 plunkr 修改后的演示.

更新

另一种方法是 $watch 滑块的值.您可以设置超时,这样您在滑动时就不会触发您的函数,但只有在值一段时间没有改变时才触发.

var 超时;$scope.$watch('slider.sliderValue', function() {如果(超时){$timeout.cancel(超时);}timeout = $timeout($scope.executeMe,200);});

参见示例

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');
    }
}]);

What i'm trying to do with no success is to execute a function when the user finishis to to move the slider

here is the code on plunker:

http://plnkr.co/edit/iULltHh0fRAbvuoFu84t?p=preview

Thanks allot

Avi

解决方案

You can use ngMouseup for that.

<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>

Here's your plunkr modified to demonstrate.

Update

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);
});

See example

这篇关于Angular Bootstrap Slider - 停止执行功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆