How to add thousand separating commas for numbers in angularJS?

Question

I simply want to convert a string of numbers to a number which will be displayed using thousand separated commas.

var value = "123456"; 

I want to display "123,465" in a grid. I have looked some documentation on this but everything is about displaying it in HTML. I want to display this in a dynamic grid.

function numberRenderer (params) {                     return new Number (params.value);                 } 

I want to format the number so that I can convert that into a string for display.

Answer 1

Use a filter ...

HTML usage

{{ number_expression | number : fractionSize}} 

Js usage

$filter('number')(number, fractionSize) 

Answer 2

I appreciated the answer from @jbrown, but I was also hoping to find some type of solution to add commas to an input field as the user enters numbers. I ended up finding this directive which proved to be exactly what I needed.

HTML

<input type="text" ng-model="someNumber" number-input /> 

JAVASCRIPT

myApp.directive('numberInput', function($filter) {   return {     require: 'ngModel',     link: function(scope, elem, attrs, ngModelCtrl) {        ngModelCtrl.$formatters.push(function(modelValue) {         return setDisplayNumber(modelValue, true);       });        // it's best to change the displayed text using elem.val() rather than       // ngModelCtrl.$setViewValue because the latter will re-trigger the parser       // and not necessarily in the correct order with the changed value last.       // see http://radify.io/blog/understanding-ngmodelcontroller-by-example-part-1/       // for an explanation of how ngModelCtrl works.       ngModelCtrl.$parsers.push(function(viewValue) {         setDisplayNumber(viewValue);         return setModelNumber(viewValue);       });        // occasionally the parser chain doesn't run (when the user repeatedly        // types the same non-numeric character)       // for these cases, clean up again half a second later using "keyup"       // (the parser runs much sooner than keyup, so it's better UX to also do it within parser       // to give the feeling that the comma is added as they type)       elem.bind('keyup focus', function() {         setDisplayNumber(elem.val());       }); 

      function setDisplayNumber(val, formatter) {         var valStr, displayValue;          if (typeof val === 'undefined') {           return 0;         }          valStr = val.toString();         displayValue = valStr.replace(/,/g, '').replace(/[A-Za-z]/g, '');         displayValue = parseFloat(displayValue);         displayValue = (!isNaN(displayValue)) ? displayValue.toString() : '';          // handle leading character -/0         if (valStr.length === 1 && valStr[0] === '-') {           displayValue = valStr[0];         } else if (valStr.length === 1 && valStr[0] === '0') {           displayValue = '';         } else {           displayValue = $filter('number')(displayValue);         } 

        // handle decimal         if (!attrs.integer) {           if (displayValue.indexOf('.') === -1) {             if (valStr.slice(-1) === '.') {               displayValue += '.';             } else if (valStr.slice(-2) === '.0') {               displayValue += '.0';             } else if (valStr.slice(-3) === '.00') {               displayValue += '.00';             }           } // handle last character 0 after decimal and another number           else {             if (valStr.slice(-1) === '0') {               displayValue += '0';             }           }         }          if (attrs.positive && displayValue[0] === '-') {           displayValue = displayValue.substring(1);         }          if (typeof formatter !== 'undefined') {           return (displayValue === '') ? 0 : displayValue;         } else {           elem.val((displayValue === '0') ? '' : displayValue);         }       } 

      function setModelNumber(val) {         var modelNum = val.toString().replace(/,/g, '').replace(/[A-Za-z]/g, '');         modelNum = parseFloat(modelNum);         modelNum = (!isNaN(modelNum)) ? modelNum : 0;         if (modelNum.toString().indexOf('.') !== -1) {           modelNum = Math.round((modelNum + 0.00001) * 100) / 100;         }         if (attrs.positive) {           modelNum = Math.abs(modelNum);         }         return modelNum;       }     }   }; }); 

AngularJS Directive was found from: AngularJS number input formatted view

https://jsfiddle.net/benlk/4dto9738/