Skip to content

Commit 828d5ec

Browse files
seiyriaseiyria
committed
Merge pull request seiyria#37 from robman87/master
Added support to update model value for multiple events
2 parents 9511f0e + 66c3159 commit 828d5ec

File tree

3 files changed

+103
-64
lines changed

3 files changed

+103
-64
lines changed

‎slider.js

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -87,12 +87,28 @@ angular.module('ui.bootstrap-slider', [])
8787
slider.slider('destroy');
8888
slider = $(element.find(".slider-input")[0]).slider(options);
8989

90-
var updateEvent = attrs.updateevent || 'slide';
90+
var updateEvent;
91+
if (angular.isString(attrs.updateevent)) {
92+
// check if array of event names
93+
if (attrs.updateevent.indexOf("[") === 0) {
94+
updateEvent = angular.fromJson(attrs.updateevent);
95+
}
96+
else {
97+
// if only single event name in string
98+
updateEvent = [attrs.updateevent];
99+
}
100+
}
101+
else {
102+
// default to slide event
103+
updateEvent = ['slide'];
104+
}
91105

92-
slider.on(updateEvent, function (ev) {
93-
ngModelCtrl.$setViewValue(ev.value);
94-
$timeout(function () {
95-
$scope.$apply();
106+
angular.forEach(updateEvent, function(sliderEvent) {
107+
slider.on(sliderEvent, function(ev) {
108+
ngModelCtrl.$setViewValue(ev.value);
109+
$timeout(function() {
110+
$scope.$apply();
111+
});
96112
});
97113
});
98114

@@ -108,7 +124,6 @@ angular.module('ui.bootstrap-slider', [])
108124

109125
if ($scope[sliderEventAttr]) {
110126
var invoker = $parse(attrs[sliderEventAttr]);
111-
//var invoker = $parse(attrs[sliderEventAttr]);
112127
invoker($scope.$parent, { $event: ev, value: ev.value });
113128

114129
$timeout(function() {

‎test.html

Lines changed: 72 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,96 @@
11
<html ng-app='angular-bootstrap-slider-test'>
2-
<head>
3-
<title>Angular Bootstrap Slider test</title>
4-
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
5-
<link rel="stylesheet" href="bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css">
6-
</head>
7-
<body ng-controller="TestCtrl">
2+
<head>
3+
<title>Angular Bootstrap Slider test</title>
4+
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
5+
<link rel="stylesheet" href="bower_components/seiyria-bootstrap-slider/dist/css/bootstrap-slider.css">
6+
</head>
7+
<body ng-controller="TestCtrl">
88

9-
<div class="col-md-2 col-md-offset-2">
9+
<div class="col-md-2 col-md-offset-2">
1010

11-
Slider Value: <input type="number" ng-model="sliders.sliderValue" class="form-control">
11+
Slider Value: <input type="number" ng-model="sliders.sliderValue" class="form-control">
1212

13-
Max. Value: <input type="number" ng-model="testOptions.max" class="form-control">
14-
Min. Value: <input type="number" ng-model="testOptions.min" class="form-control">
13+
Max. Value: <input type="number" ng-model="testOptions.max" class="form-control">
14+
Min. Value: <input type="number" ng-model="testOptions.min" class="form-control">
1515

16-
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max"></slider>
17-
Value: {{sliders.sliderValue}}
16+
<slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max"></slider>
17+
Value: {{sliders.sliderValue}}
1818

19-
<br><br><br><br>
19+
<br><br><br><br>
2020

21-
<span slider ng-model="sliders.secondSliderValue" min="minTest" slider-id="idTest"></span>
22-
Value: {{sliders.secondSliderValue}}
21+
<span slider ng-model="sliders.secondSliderValue" min="minTest" slider-id="idTest"></span>
22+
Value: {{sliders.secondSliderValue}}
2323

24-
<br><br><br><br>
24+
<br><br><br><br>
2525

26-
<span slider ng-model="sliders.rangeSliderValue" min="testOptions.min" max="testOptions.max" range="range" slider-id="rangeSlider1"></span>
27-
Value: {{sliders.rangeSliderValue}}
26+
<span slider ng-model="sliders.rangeSliderValue" min="testOptions.min" max="testOptions.max" range="range"
27+
slider-id="rangeSlider1"></span>
28+
Value: {{sliders.rangeSliderValue}}
2829

29-
<br><br><br><br>
30+
<br><br><br><br>
3031

31-
<span ng-model="sliders.rangeSliderValue2" slider min="testOptions.min" max="testOptions.max" range="range" value="value" slider-id="rangeSlider2"></span>
32-
Value: {{sliders.rangeSliderValue2}}
32+
<span ng-model="sliders.rangeSliderValue2" slider min="testOptions.min" max="testOptions.max" range="range"
33+
value="value" slider-id="rangeSlider2"></span>
34+
Value: {{sliders.rangeSliderValue2}}
3335

34-
<br><br><br><br>
36+
<br><br><br><br>
3537

36-
<slider ng-model="sliders.thirdSliderValue" formater="myFormater"></slider>
37-
Value: {{sliders.thirdSliderValue}}
38+
<slider ng-model="sliders.thirdSliderValue" formater="myFormater"></slider>
39+
Value: {{sliders.thirdSliderValue}}
3840

39-
<br><br><br><br>
41+
<br><br><br><br>
4042

41-
<span slider ng-model="sliders.fourthSliderValue" on-start-slide="status='started'" on-slide="status='sliding'" on-stop-slide="status='stopped'"></span>
42-
Value: {{sliders.fourthSliderValue}}<br>
43-
Status: {{status}}
43+
<span slider ng-model="sliders.fourthSliderValue" on-start-slide="status='started'" on-slide="status='sliding'"
44+
on-stop-slide="status='stopped'"></span>
45+
Value: {{sliders.fourthSliderValue}}
46+
Status: {{status}}
4447

45-
<br><br><br><br>
48+
<span slider ng-model="sliders.fourthSliderValue" on-start-slide="status='started'" on-slide="slideDelegate(value)"
49+
on-stop-slide="status='stopped'"></span>
50+
Value: {{sliders.fourthSliderValue}}
51+
Status: {{status}}
4652

47-
<span slider ng-model="sliders.fourthSliderValue" on-start-slide="status='started'" on-slide="slideDelegate(value)" on-stop-slide="status='stopped'"></span>
48-
Value: {{sliders.fourthSliderValue}}<br>
49-
Status: {{status}}
53+
<br><br><br><br>
5054

51-
<br><br><br><br>
55+
<span slider ng-model="sliders.fifthSliderValue" on-start-slide="slideDelegate(value, $event)" on-slide="slideDelegate(value, $event)" on-stop-slide="slideDelegate(value, $event)"></span>
56+
Value: {{sliders.fifthSliderValue}}<br>
57+
Event type: {{delegateEvent.type}}
5258

53-
<span slider ng-model="sliders.fifthSliderValue" on-start-slide="slideDelegate(value, $event)" on-slide="slideDelegate(value, $event)" on-stop-slide="slideDelegate(value, $event)"></span>
54-
Value: {{sliders.fifthSliderValue}}<br>
55-
Event type: {{delegateEvent.type}}
56-
</div>
59+
<br><br><br><br>
5760

61+
Updates model on slide event by default
62+
<span slider ng-model="sliders.sixthSliderValue"></span>
63+
Value: {{sliders.sixthSliderValue}}
5864

59-
<script src="bower_components/jquery/dist/jquery.js"></script>
60-
<script src="bower_components/angular/angular.js"></script>
61-
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
62-
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
65+
<br><br>
6366

64-
<!-- angular-slider include -->
65-
<script src="slider.js"></script>
67+
Updates model only on slideStop event
68+
<span slider ng-model="sliders.seventhSliderValue" updateevent="slideStop"></span>
69+
Value: {{sliders.seventhSliderValue}}
6670

67-
<!-- test file include -->
68-
<script src="test.js"></script>
69-
</body>
71+
<br><br>
72+
73+
Updates model on slideStart and slideStop
74+
<span slider ng-model="sliders.eighthSliderValue" updateevent='["slideStart","slideStop"]'></span>
75+
Value: {{sliders.eighthSliderValue}}
76+
77+
<br><br>
78+
79+
Updates model on all events
80+
<span slider ng-model="sliders.ninthSliderValue" updateevent="[&quot;slideStop&quot;, &quot;slide&quot;, &quot;slideStart&quot;]"></span>
81+
Value: {{sliders.ninthSliderValue}}
82+
</div>
83+
84+
85+
<script src="bower_components/jquery/dist/jquery.js"></script>
86+
<script src="bower_components/angular/angular.js"></script>
87+
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
88+
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
89+
90+
<!-- angular-slider include -->
91+
<script src="slider.js"></script>
92+
93+
<!-- test file include -->
94+
<script src="test.js"></script>
95+
</body>
7096
</html>

‎test.js

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ angular.module( 'angular-bootstrap-slider-test', ['ui.bootstrap-slider'] )
66
$scope.sliders.secondSliderValue = 0;
77
$scope.sliders.thirdSliderValue = 0;
88
$scope.sliders.fourthSliderValue = 0;
9-
$scope.sliders.fifthSliderValue = 0;
9+
$scope.sliders.fithSliderValue = 0;
1010
$scope.sliders.sixthSliderValue = 0;
1111
$scope.sliders.seventhSliderValue = 0;
1212
$scope.sliders.eighthSliderValue = 0;
@@ -26,19 +26,17 @@ angular.module( 'angular-bootstrap-slider-test', ['ui.bootstrap-slider'] )
2626
$scope.sliders.rangeSliderValue = [10, 50];
2727
$scope.sliders.rangeSliderValue2 = [10, 50];
2828

29-
3029
$scope.$watch( 'sliders.rangeSliderValue2', function ( value ) {
3130
$log.log( 'sliders value has changed: ' + value );
32-
$log.log( value );
3331
} );
3432

35-
$scope.myFormater = function ( value ) {
36-
return value + "%";
37-
};
33+
$scope.myFormater = function ( value ) {
34+
return value + "%";
35+
};
3836

39-
$scope.delegateEvent = null;
40-
$scope.slideDelegate = function ( value, $event ) {
41-
$log.log( 'slide value: ' + value );
42-
$scope.delegateEvent = $event;
43-
};
44-
}] );
37+
$scope.delegateEvent = null;
38+
$scope.slideDelegate = function ( value, $event ) {
39+
$log.log( 'slide value: ' + value );
40+
$scope.delegateEvent = $event;
41+
};
42+
}]);

0 commit comments

Comments
 (0)