Tuesday , March 28 2017
Home / angularjs / AngularJs Currency Filter Example

AngularJs Currency Filter Example

AngularJs currency filter is used to attach the currency symbol in front of currency.

AngularJs Currency Filter Example :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Angular Currency Filter Example</title>
<script
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("employeeCotroller", function($scope) {
        $scope.employees = [ {
            empId : 1001,
            empName : "chandra shekhar",
            empSal : "570",
        }, {
            empId : 1002,
            empName : "scott",
            empSal : "750",
        }, {
            empId : 1003,
            empName : "mark",
            empSal : "600",
        } ]

    })
</script>
</head>
<body ng-app="myApp">
    <h1>Employee Information</h1>
    <table ng-controller="employeeCotroller" border="2">
        <tr style="background-color: green">
            <td>Employee Id</td>
            <td>Employee Name</td>
            <td>Employee Salary</td>
        </tr>
        <tr ng-repeat="employee in employees">
            <td>{{employee.empId}}</td>
            <td>{{employee.empName | uppercase}}</td>
            <td>{{employee.empSal | currency}}</td>
        </tr>
    </table>
</body>
</html>

On the above example, we have used the default currency, for this based on the locale you can get the currency in output. For me it is us locale. So that I can get $ sign in front of the currency.

If you want to change the currency type, you can give your currency symbol like below:

{{employee.empSal | currency:‘symbol’}}

Output :

Employee Information

Employee IdEmployee NameEmployee Salary
1001CHANDRA SHEKHAR$570.00
1002SCOTT$750.00
1003MARK$600.00

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

AngularJs Data Binding Example

One of the important feature of AngularJs is Data Binding. Data binding makes the AngularJs …

Leave a Reply

Your email address will not be published. Required fields are marked *