AngularJS formatted number calculation

Question

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/

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

Solution: changed the modelCtrl.setViewValue(number) to modelCtrl.viewValue(number) so that the display only will be affected not the actual value (not sure about this workaround though.).

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

Thanks for the help guys!

Alon Eitan · Accepted Answer · 2016-07-03 06:00:49Z

2

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.

edited Jul 3, 2016 at 6:00

answered Jul 3, 2016 at 3:30

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

aldesabido Over a year ago

Thanks for the response. But I don't really want to use two seperate variable for displaying and calculation. I hope that there's still a way for this.

Alon Eitan Over a year ago

I did my best, couldn't think of anything else. Hope you'll find a solution using one variable (That would be an interesting one)

aldesabido Over a year ago

Thanks for the effort bro. It would really a pain in the ass to do this in all of my number fields.

Alon Eitan Over a year ago

@aldesabido I have just posted another example, so take a look and let me know. I'm off to bed....

aldesabido Over a year ago

haha. yah that would work but I really don't want to do it in all of my module. but gonna use it as my trump card.

|

pzelenovic · Accepted Answer · 2016-07-03 02:47:23Z

1

If you are not limited to using only Angular you can check out accounting.js library which does exactly what you need.

Then you could also keep a variable on $scope, that you use for calculation only, and you maintain the state between your var.value and that other $scope variable with help of accounting.js for formatting.

I hope this helps. Good luck.

answered Jul 3, 2016 at 2:47

pzelenovic

4183 silver badges15 bronze badges

1 Comment

aldesabido Over a year ago

actually I am using accounting.js for my formatting. I don't really want to use two seperate variables for the formatted one and the original value.

Collectives™ on Stack Overflow

AngularJS formatted number calculation

2 Answers 2

18 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

18 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related