<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Numeric Select Box</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-ng-app="app">
<form data-ng-controller="formCtrl">
<div class="numeric-select">
<select name="num" data-ng-model="form.num"
data-ng-options="i as i for i in numbers track by i"
data-select-customization="{{form.num}}">
</select>
</div>
</form>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/007design/numeric-select-box-bqogzm */
.numeric-select select {
-webkit-appearance: none;
height: 30px;
width: 25px;
text-align: center;
padding: 0 0 0 8px;
margin: 0 3px;
border: 1px solid black;
}
.numeric-select select::selection {
background-color: transparent;
}
.numeric-select .minus-button,
.numeric-select .plus-button {
border-radius: 50%;
background-color: blue;
color: white;
padding: 3px;
text-align: center;
width: 20px;
height: 20px;
display: inline-block;
cursor: pointer;
}
.numeric-select .minus-button::selection,
.numeric-select .plus-button::selection {
background-color: transparent;
}
.numeric-select .minus-button.disabled,
.numeric-select .plus-button.disabled {
background-color: grey;
}
/*Downloaded from https://www.codeseek.co/007design/numeric-select-box-bqogzm */
angular.module('app', [])
.controller('formCtrl', ['$scope', function($scope) {
$scope.form = {num: 0};
$scope.numbers = [0,1,2]
}])
.directive('selectCustomization', ['$timeout', '$compile', function($timeout, $compile) {
return {
require: ['ngModel','select'],
link: function(scope, elem, attrs, ctrls) {
var ctrl = ctrls[0];
var minus = $compile('<span class="minus-button" data-ng-click="minus()" data-ng-class="{disabled: isMinusDisabled()}">-</span>')(scope);
var plus = $compile('<span class="plus-button" data-ng-click="plus()" data-ng-class="{disabled: isPlusDisabled()}">+</span>')(scope);
elem.after(plus);
elem.before(minus);
var options = [];
scope.toint = function(x) {
return parseInt(x, 10);
};
$timeout(function() {
elem.children().each(function() {
options.push(parseInt($(this).attr('value')));
});
ctrl.$setViewValue(scope.toint(attrs.selectCustomization));
ctrl.$render();
});
scope.plus = function() {
var current = options.indexOf(ctrl.$viewValue);
if (current < options.length-1)
ctrl.$setViewValue(options[current+1]);
ctrl.$render();
};
scope.minus = function() {
var current = options.indexOf(ctrl.$viewValue);
if (current > 0)
ctrl.$setViewValue(options[current-1]);
ctrl.$render();
};
scope.isMinusDisabled = function() {
var current = options.indexOf(ctrl.$viewValue);
return current <= 0;
};
scope.isPlusDisabled = function() {
var current = options.indexOf(ctrl.$viewValue);
return current >= options.length-1;
};
}
};
}]);