角引导滑块 - 关于停止执行功能

我已经创建滑盖下面的代码：角引导滑块 - 关于停止执行功能

<html ng-app="angular-bootstrap-slider-test"> 
    <head> 
     <title>Angular Bootstrap Slider test</title> 
     <script data-require="[email protected]" data-semver="1.3.0" src="//code.angularjs.org/1.3.0/angular.js"></script> 
     <script data-require="[email protected]*" 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'); 
    } 
}]);

我尝试没有成功做的是在用户完成移动滑块时执行功能

这里是plunker上的代码：

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

感谢配发

阿维

来源

2014-11-03 אVי

您可以使用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>

这里的your plunkr修改为演示。

更新

一种不同的方法将是$watch滑块的值。您可以设置超时时间，以便在滑动时不会触发您的功能，但只有当该值在一段时间内没有改变时才会触发。

var timeout; 
$scope.$watch('sliders.sliderValue', function() { 
    if (timeout) { 
     $timeout.cancel(timeout); 
    } 
    timeout = $timeout($scope.executeMe,200); 
});

见example

来源

2014-11-03 09:03:55 yarons

嗨，谢谢，但这个执行即使该值没有改变。 – 2014-11-03 10:31:49

请参阅上面的更新 – yarons 2014-11-03 11:30:56

如果您在组件外部上移鼠标，即将鼠标移动到组件外部时，ng-mouseup将不会触发 - 即拖动滑块但将鼠标指针向下移动到页面上，滑块仍然处于活动状态并拖动，然后释放鼠标按钮你不会得到一个mouseup解雇。 – caprica 2014-12-23 20:01:23

角引导滑块 - 关于停止执行功能

回答

相关问题