Angular:
http://angularjs.org/
by mrajcok
HTML
<div ng-controller="MyCtrl">
<input data-ng-model="session.amountChosen" type="text" min="1" class="form-control input-small" data-number-input>
</div>
JavaScript
var app = angular.module('myApp', []);
app.directive('numberInput', function ($parse) {
return {
require: 'ngModel',
link: function (scope, elm, attrs, ctrl) {
var minValue = scope.$eval(attrs.min) || 0,
maxValue = scope.$eval(attrs.max) || Infinity;
elm.wrap('<div class="number-input-wrap"></div>').parent().append('<div class="number-input-controls"><a href="#" class="btn btn-xs btn-pluimen">+</a><a href="#" class="btn btn-xs btn-pluimen">-</a></div>');
elm.parent().find('a').bind('click', function (e) {
//var currValue = scope.$eval(attrs.ngModel);
var currValue = ctrl.$modelValue,
newValue;
if (this.text === '+' && currValue < maxValue) {
newValue = currValue + 1;
} else if (this.text === '-' && currValue > minValue) {
newValue = currValue - 1;
}
ctrl.$setViewValue(newValue);
ctrl.$render();
e.preventDefault();
});
}
};
});
function MyCtrl($scope) {
$scope.session = {
amountChosen: 22
};
}