Menu
Is there an input in Material Design that takes a format as a parameter. I specifically need the currency format.
If this is not available, what approach would you suggest to achieve this functionality.
Thanks.
946
You can do something like this, add the icon as the currency and use the following directive for masking,
<body ng-controller="MainCtrl" layout="column">
<md-content >
<md-input-container class="md-icon-float">
<label>Price</label>
<md-icon md-font-icon="fa fa-money"></md-icon>
<input currency-mask ng-model="amount" id="sInput" />
</md-input-container>
</md-content>
</body>
Directive
app.directive('currencyMask', function() {
return {
restrict: 'A',
require: 'ngModel',
link: function(scope, element, attrs, ngModelController) {
var formatNumber = function(value) {
value = value.toString();
value = value.replace(/[^0-9\.]/g, "");
var parts = value.split('.');
parts[0] = parts[0].replace(/\d{1,3}(?=(\d{3})+(?!\d))/g, "$&,");
if (parts[1] && parts[1].length > 2) {
parts[1] = parts[1].substring(0, 2);
}
return parts.join(".");
};
var applyFormatting = function() {
var value = element.val();
var original = value;
if (!value || value.length == 0) {
return
}
value = formatNumber(value);
if (value != original) {
element.val(value);
element.triggerHandler('input')
}
};
element.bind('keyup', function(e) {
var keycode = e.keyCode;
var isTextInputKey =
(keycode > 47 && keycode < 58) || // number keys
keycode == 32 || keycode == 8 || // spacebar or backspace
(keycode > 64 && keycode < 91) || // letter keys
(keycode > 95 && keycode < 112) || // numpad keys
(keycode > 185 && keycode < 193) || // ;=,-./` (in order)
(keycode > 218 && keycode < 223); // [\]' (in order)
if (isTextInputKey) {
applyFormatting();
}
});
element.bind('blur', function(evt) {
if (angular.isDefined(ngModelController.$modelValue)) {
var val = ngModelController.$modelValue.split('.');
if (val && val.length == 1) {
if (val != "") {
ngModelController.$setViewValue(val + '.00');
ngModelController.$render();
}
} else if (val && val.length == 2) {
if (val[1] && val[1].length == 1) {
ngModelController.$setViewValue(val[0] + '.' + val[1] + '0');
ngModelController.$render();
} else if (val[1].length == 0) {
ngModelController.$setViewValue(val[0] + '.00');
ngModelController.$render();
}
applyFormatting();
}
}
})
ngModelController.$parsers.push(function(value) {
if (!value || value.length == 0) {
return value;
}
value = value.toString();
value = value.replace(/[^0-9\.]/g, "");
return value;
});
ngModelController.$formatters.push(function(value) {
if (!value || value.length == 0) {
return value;
}
value = formatNumber(value);
return value;
});
}
};
});
DEMO
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
