Calculating a formatted number in AngularJS format

Question

Yesterday I had problems with how to make a formatted number in my fields, but now that I have reached it, I have a problem with how to perform calculations.

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 field value is less than a thousand, but when I reach 1000 , the number will be formatted with a comma of 1000 , and it will become a string and can no longer do the calculations.

All I want is to format my number fields correctly (for display), but keep the true value for performing calculations without using a separate variable in each number field.

Watch the violin. Thank!

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

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

Solution: changed modelCtrl.setViewValue (number) to modelCtrl.viewValue (number) so that the screen is not affected by the actual value (not sure about this workaround, though.).

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

Thanks for helping the guys!

Answer 1

The only solution I can think of is to keep track of 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 as follows: {{numbericVal * 2}}

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

---

Another RAW example that uses the callback function whenever the value changes: http://jsfiddle.net/1syh7cne/9/

I used attributes to determine the function passing the object and the current numeric value. Note that you can simply parse the val passed object, rather than trusting the second parameter in the function.

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

Just take a look - I think you will see what I did there. But, as I said, this is a general direction for a possible solution.

Answer 2

If you are not limited to just using Angular, you can check out the accounting.js library that does exactly what you need.

Then you can also save the variable in the $ scope that you use only for calculation, and you save the state between the var.value variable and another $ scope variable with accounting.js for formatting.

Hope this helps. Good luck.