Skip to content

Commit 70ff02d

Browse files
robert-surveylegendrobert-surveylegend
committed
Updated tests for updating model value on multiple events.
1 parent 375c685 commit 70ff02d

File tree

2 files changed

+110
-82
lines changed

2 files changed

+110
-82
lines changed

‎test.html‎

Lines changed: 66 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,90 @@
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-
{{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-
{{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"
27+
slider-id="rangeSlider1"></span>
28+
Value: {{sliders.rangeSliderValue}}
2629

27-
<br><br><br><br>
30+
<br><br><br><br>
2831

29-
<span slider ng-model="sliders.rangeSliderValue" min="testOptions.min" max="testOptions.max" range="range" slider-id="rangeSlider1"></span>
30-
{{sliders.rangeSliderValue}}
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}}
3135

36+
<br><br><br><br>
3237

33-
<br><br><br><br>
34-
<span ng-model="sliders.rangeSliderValue2" slider min="testOptions.min" max="testOptions.max" range="range" value="value" slider-id="rangeSlider2"></span>
35-
{{sliders.rangeSliderValue2}}
38+
<slider ng-model="sliders.thirdSliderValue" formater="myFormater"></slider>
39+
Value: {{sliders.thirdSliderValue}}
3640

41+
<br><br><br><br>
3742

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

39-
<br><br><br><br>
40-
<slider ng-model="sliders.thirdSliderValue" formater="myFormater"></slider>
41-
{{sliders.thirdSliderValue}}
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}}
4252

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

48-
<span slider ng-model="sliders.fourthSliderValue" on-start-slide="status='started'" on-slide="slideDelegate(value)" on-stop-slide="status='stopped'"></span>
49-
{{sliders.fourthSliderValue}}
50-
status: {{status}}
55+
Updates model on slide event by default
56+
<span slider ng-model="sliders.sixthSliderValue"></span>
57+
Value: {{sliders.sixthSliderValue}}
5158

52-
</div>
59+
<br><br>
5360

61+
Updates model only on slideStop event
62+
<span slider ng-model="sliders.seventhSliderValue" updateevent="slideStop"></span>
63+
Value: {{sliders.seventhSliderValue}}
5464

55-
<script src="bower_components/jquery/dist/jquery.js"></script>
56-
<script src="bower_components/angular/angular.js"></script>
57-
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
58-
<script src="bower_components/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js"></script>
65+
<br><br>
5966

60-
<!-- angular-slider include -->
61-
<script src="slider.js"></script>
67+
Updates model on slideStart and slideStop
68+
<span slider ng-model="sliders.eighthSliderValue" updateevent='["slideStart","slideStop"]'></span>
69+
Value: {{sliders.eighthSliderValue}}
6270

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

‎test.js‎

Lines changed: 44 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,44 @@
1-
angular.module('angular-bootstrap-slider-test', ['ui.bootstrap-slider'])
2-
.controller('TestCtrl', ['$scope', '$log', function($scope, $log) {
3-
4-
$scope.sliders = {};
5-
$scope.sliders.sliderValue = 0;
6-
7-
8-
$scope.range = true;
9-
$scope.value = [55, 70];
10-
11-
$scope.testOptions = {
12-
min: 5,
13-
max: 103,
14-
step: 2.2,
15-
value: 7,
16-
rangeValue : [2,20]
17-
};
18-
19-
$scope.sliders.secondSliderValue = 0;
20-
$scope.sliders.rangeSliderValue = [ 10, 50 ];
21-
22-
$scope.sliders.rangeSliderValue2 = [ 10, 50 ];
23-
24-
25-
$scope.$watch('sliders.rangeSliderValue2', function(value) {
26-
27-
console.log('sliders value has changed: ' + value);
28-
console.log(value);
29-
});
30-
31-
32-
$scope.sliders.thirdSliderValue = 0;
33-
$scope.myFormater = function(value) {
34-
return value + "%";
35-
};
36-
37-
$scope.slideDelegate = function(value){
38-
$log.log('slide value: ' + value);
39-
};
40-
}]);
1+
angular.module( 'angular-bootstrap-slider-test', ['ui.bootstrap-slider'] )
2+
.controller( 'TestCtrl', ['$scope', '$log', function ( $scope, $log ) {
3+
4+
$scope.sliders = {};
5+
$scope.sliders.sliderValue = 0;
6+
$scope.sliders.secondSliderValue = 0;
7+
$scope.sliders.thirdSliderValue = 0;
8+
$scope.sliders.fourthSliderValue = 0;
9+
$scope.sliders.fithSliderValue = 0;
10+
$scope.sliders.sixthSliderValue = 0;
11+
$scope.sliders.seventhSliderValue = 0;
12+
$scope.sliders.eighthSliderValue = 0;
13+
$scope.sliders.ninthSliderValue = 0;
14+
15+
16+
$scope.range = true;
17+
$scope.value = [55, 70];
18+
19+
$scope.testOptions = {
20+
min: 5,
21+
max: 103,
22+
step: 2.2,
23+
value: 7,
24+
rangeValue: [2, 20]
25+
};
26+
27+
$scope.sliders.rangeSliderValue = [10, 50];
28+
$scope.sliders.rangeSliderValue2 = [10, 50];
29+
30+
31+
$scope.$watch( 'sliders.rangeSliderValue2', function ( value ) {
32+
33+
console.log( 'sliders value has changed: ' + value );
34+
console.log( value );
35+
} );
36+
37+
$scope.myFormater = function ( value ) {
38+
return value + "%";
39+
};
40+
41+
$scope.slideDelegate = function ( value ) {
42+
$log.log( 'slide value: ' + value );
43+
};
44+
}] );

0 commit comments

Comments
 (0)