Customized currency Filter to show amount in well separated comma format

Question

I am new to AngularJS and got stuck into this complex thing. I have to make a filter on HTML input which will accept the currency in digits (no alphabets), a comma should be implemented automatically after 3 digits, decimal should be there and should append dollar sign on the left.

I have tried a lot but results are not coming which are required.I made this JavaScript function which does the same thing but how I will implement this in AngularJS while typing in the input box.

function formatPera(num) {
    var p = num.toFixed(2).split(".");
    return p[0].split("").reverse().reduce(function(acc, num, i, orig) {
        return  num + (i && !(i % 3) ? "," : "") + acc;
    }, "") + "." + p[1];
}

var money = 1234;
money = formatPera(money);

console.log(money);

I have already searched a lot and checked the already deployed code.

With the multiple tags, it's not clear if you need AngularJS (v1) or Angular (v2+). Could you edit your tags to make it clear which version of Angular you need? Thanks! — DeborahK, Jan 31 '18 at 08:01
@DeborahK neednot specify v1 or 2 i guess people should understand now anyways i had the same doubt — Rahul Singh, Jan 31 '18 at 08:02
*I* know that ... but based on the info above I assumed the OP didn't know that ... so I was providing the version numbers for clarification. — DeborahK, Jan 31 '18 at 08:03
sorry by mistake i have tagged angularJs and Angular2. But I need to implement while typing in HTML Input box. — Himanshu Chawla, Jan 31 '18 at 08:11
@Cerbrus I am only using Angular and tried the same to be implemented in Javascript core. Now i am thinking to implement this watch of angular. Any help you can do ? — Himanshu Chawla, Jan 31 '18 at 08:31

score 0 · Answer 1 · answered Jan 31 '18 at 09:29

Check this below code. it work perfectly at my end.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <input type="text" ng-model="price"/> <br/>
        {{price | INR}}
    </div>

    <script src="../lib/angular.js"></script>
    <script>
        var app = angular.module('app', []);
        app.filter('INR', function () {
            return function (input) {
                var length = input.length;
                if(input.length <= 3)
                {
                    return input;
                }
                else {
                    var input = input.split(''); 
                    var output = input[length - 3] + input[length - 2] + input[length - 1];
                    var j = 2;
                    for(i=input.length-3;i--;i>=0)
                    {                        
                        if(j>1)
                        {
                            output = ',' + output;
                            j = 0;
                        }
                        if (i >= 0)
                        {
                            output = input[i] + output;
                            j++;
                        }
                    }
                    return output;
                }
            }
        });
        app.controller('ctrl', function ($scope) {
            $scope.price = '4665987565';
        });
    </script>

</body>
</html>

After processing you may add the currency sign to the string. for e.g. INR, USD, etc — Rakesh Burbure, Jan 31 '18 at 09:30

Customized currency Filter to show amount in well separated comma format

1 Answers1