I'm trying to figure out if there is a way to bind a directive to all <input type="number">
elements without having to go back and add a class, additional attribute, etc. to each number field?
I have a lot of number fields so I was hoping to avoid having to update them all.
Since it doesn't appear that there is a way to bind specifically to an input type, I just ended up creating a simple directive bound to every input and then isolated the functionality of the directive to inputs of the number type.
.directive('input', ['$document', '$log', '$filter', function ($document, $log, $filter) {
return {
restrict: 'E',
require: '?ngModel',
scope: {
directiveConfig: '=',
controllerInterface: '='
},
link: function (scope, element, attrs, ngModelCtrl) {
// --------------------------------------------------------------
// Formatters & Parsers for `input[type="number"]` only
// --------------------------------------------------------------
if (attrs.type === "number") {
// Prevents number inputs from using scrolling to change number.
element.bind('mousewheel', function (event) {
event.preventDefault();
});
// Prevents number input from changing with up/down arrow keys and
// instead simulates tabbing.
element.bind("keydown keypress", function (event) {
var inputs = element.closest('form').find(':input');
switch (event.which) {
case 38:
// Arrow Up: 38
inputs.eq( inputs.index(element) - 1 ).focus();
event.preventDefault();
break;
case 40:
// Arrow Down: 40
inputs.eq( inputs.index(element) + 1 ).focus();
event.preventDefault();
break;
default:
break;
}
});
// Ensures that only numbers can be entered.
var numericUserInput = function(value) {
var parsed = null;
if ($filter('exists')(value)) {
parsed = parseFloat(value.toString().replace(/[^0-9.]+$/, ''), 10);
if (typeof(value) != "number") {
parsed = null;
}
if (parsed !== value) {
ngModelCtrl.$setViewValue(parsed);
ngModelCtrl.$render();
}
}
return parsed;
}
ngModelCtrl.$parsers.push(numericUserInput);
}
}
}
}])
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.