angularjs - Material Design Input with currency format -
is there input in material design takes format parameter. need currency format.
if not available, approach suggest achieve functionality.
thanks.
you can this, add icon currency , use following directive 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; }); } }; });
Comments
Post a Comment