Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I could not get the $formatters function to work like i wanted. I also could not find a single example of what i was looking for anywhere so i am going to post my answer in case someone needs it. </p> <p>This is a directive for formatting us currency in input boxes with ng-model</p> <pre><code> .directive('uiCurrency', function ($filter, $parse) { return { require: 'ngModel', restrict: 'A', link: function (scope, element, attrs, ngModel) { function parse(viewValue, noRender) { if (!viewValue) return viewValue; // strips all non digits leaving periods. var clean = viewValue.toString().replace(/[^0-9.]+/g, '').replace(/\.{2,}/, '.'); // case for users entering multiple periods throughout the number var dotSplit = clean.split('.'); if (dotSplit.length &gt; 2) { clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); } else if (dotSplit.length == 2) { clean = dotSplit[0] + '.' + dotSplit[1].slice(0, 2); } if (!noRender) ngModel.$render(); return clean; } ngModel.$parsers.unshift(parse); ngModel.$render = function() { console.log('viewValue', ngModel.$viewValue); console.log('modelValue', ngModel.$modelValue); var clean = parse(ngModel.$viewValue, true); if (!clean) return; var currencyValue, dotSplit = clean.split('.'); // todo: refactor, this is ugly if (clean[clean.length-1] === '.') { currencyValue = '$' + $filter('number')(parseFloat(clean)) + '.'; } else if (clean.indexOf('.') != -1 &amp;&amp; dotSplit[dotSplit.length - 1].length == 1) { currencyValue = '$' + $filter('number')(parseFloat(clean), 1); } else if (clean.indexOf('.') != -1 &amp;&amp; dotSplit[dotSplit.length - 1].length == 1) { currencyValue = '$' + $filter('number')(parseFloat(clean), 2); } else { currencyValue = '$' + $filter('number')(parseFloat(clean)); } element.val(currencyValue); }; } }; }) </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload