places - ¿Cómo agregar mil comas separadoras para números en angularJS?

angularjs number format comma

Question

Simplemente quiero convertir una cadena de números en un número que se mostrará usando miles de comas separadas.

var value = "123456";

Quiero mostrar "123,465" en una cuadrícula. He visto algo de documentación sobre esto, pero todo se trata de mostrarlo en HTML. Quiero mostrar esto en una cuadrícula dinámica.

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

Quiero formatear el número para poder convertirlo en una cadena para mostrar.

Answer 1

Aprecié la respuesta de @jbrown, pero también esperaba encontrar algún tipo de solución para agregar comas a un campo de entrada a medida que el usuario ingresa números. Terminé encontrando esta directiva que resultó ser exactamente lo que necesitaba.

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;
}
}
};
});

La directiva AngularJS se encontró en: Vista formateada de entrada de número AngularJS

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

Answer 2

Usa un filtro ...

Uso de HTML

{{ number_expression | number : fractionSize}}

Uso de js

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