aldesabido aldesabido - 5 months ago 18
Javascript Question

AngularJS formatted number calculation

Yesterday, I am having trouble on how to make a formatted number in my number fields but now that I achieve it, I am having problem on how to do the calculation.

index.html

<div ng-controller="MyCtrl">
<input ng-model="var.value" class="integers" symbol="°" />
<br /><br />
{{var.value * 100}}
</div>


app.js

var myApp = angular.module('myApp',['ui.numeric']);

angular.module('ui.numeric', []).directive('integers', function() {
return {
require: 'ngModel',
restrict: 'EACM',
link: function(scope, element, attrs, modelCtrl) {
scope.$watch(element, function() {
var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
});
element.bind('blur', function() {

var formatted_number = accounting.formatMoney(element.val(),"", 2,",",".","%s%v");
modelCtrl.$setViewValue(formatted_number);
modelCtrl.$render();
scope.$apply();
});
element.bind('focus', function() {
var plainNumber = accounting.unformat(element.val())
if(plainNumber == "0") plainNumber = "";
modelCtrl.$setViewValue(plainNumber);
modelCtrl.$render();
scope.$apply();
console.log("I am focused!")
});
}
};
});

function MyCtrl($scope) {
$scope.var = {"value":1000.36};
}


It works when the value of the field is less than a thousand but when I reach 1000, the number would be formatted with comma 1,000 and it becomes string and can't do anymore calculations.

All I want is to properly format my number fields(for display) but retain the true value to do calculations without using separate variable in each number field.

Please see the fiddle. Thanks!

http://jsfiddle.net/aldesabido/1syh7cne/6/

SOLUTON:
I just remove the $apply() function and only use the $render() to change the display but retaining the original value by not using the $apply()

updated fiddle:
http://jsfiddle.net/aldesabido/1syh7cne/14/

Thanks for the help guys!

Answer

The only solution I can think of is to watch for changes in {{ var.value }} on the controller:

function MyCtrl($scope) {
    $scope.var = {"value":1000.36};

    $scope.$watch('var.value', function(val) {
        $scope.numbericVal = accounting.unformat(val);
    });
}

And then, use numericVal in your view like this: {{numbericVal * 2}}

Example: http://jsfiddle.net/1syh7cne/7/


Another RAW example that using callback function whenever the value gets changed: http://jsfiddle.net/1syh7cne/9/

I've used the attributes to define a function that pass the object and the current numeric value. Note that you can just parse the val of the passed object instead of trusting the second parameter in the function.

var invoker = $parse(attrs.updateFunc);
invoker(scope, {number: plainNumber});

Just take a look - I think you'll see what I did there. But as I said - It's a general direction for a possible solution.

Comments