Number and currency in AngularJS

How to format data in number and currency in AngularJS?

To format string in number and currency format in AngularJS, we can use number and currency filter respectively. Below code snippet first initialize the members JSON collection using ng-init directive.

In the first Un ordered list, notice the highlighted code snippet.

We are formatting the Salary field of the data into Number format. The first number format doesn't have any parameter so it simply write the salary field value in number format separated by comma after every 3 characters (USA million format). The second number format passes 4 as parameter (: 4), so it maintains 4 decimal character after each full number.

<div ng-app>
    <div ng-init="members=[{username:'SheoNarayan', address: 'Hyderabad', salary: 500000.25},{username: 'Munna', address:'Scotland', salary : 659}]">
    </div>
    <h4>Number format</h4>
    <ul>
        <li ng-repeat="member in members| orderBy : '-salary'">
            {{member.username | uppercase}} - {{member.address}}
            - Number -> {{ member.salary  | number }} - {{ member.salary | number: 4 }}
        </li>
    </ul>

    <h4>Currency format</h4>
    <ul>
        <li ng-repeat="member in members| orderBy : 'username'">{{member.username | uppercase}} - {{member.address}} 
            - {{ member.salary | currency }} - 
        {{ member.salary | currency: "Rs." }}
    </li>
    </ul>
</div>

In the second un ordered list, we are formatting the data in currency format. The first currency format doesn't have any parameter so it simply format the salary data into number and prefix it with "$" character (default). To customize the currency character, we can pass parameter after currency filter ": Rs." that will replace "$" with "Rs.".

Output

Currency and Number format in AngularJS