AngularJS currency and number filter
Using currency filter
Currency filter is used, when you are dealing with salary, fees or total amount type of data. You should use currency filter to an expression returning number using pipe character. Here, we have added currency filter to display employee salary using currency format.
Example: Using currency filter
Enter employee salary: <input type = "text" ng-model = "Employee.Salary">
Employee salary: {{Employee.Salary | currency}}
In the above example, we have declared an expression inside the curly braces, followed by an AngularJS filter called the currency.
Using number filter
The filter number will convert a given text and return a numeric value. In the example given below we have taken a textbox and used ng-model directive. Here textbox serves as a model.
The view has an expression with number format, which will display the values types in the textbox. If you type numbers in the textbox, then it will show you numbers in proper format. If you type alphabet in the textbox, then it will show you simple string as a result, and also it will not give any error. Number filter will not work in this situation. If you want to display “decimal” values with the numbers, you can add a parameter to the filter. For example, we want to display “two” decimal values with numbers.
Example: Using number filter in AngularJS
<!DOCTYPE html>
<html>
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body style="font-family:Arial; font-size:medium; color:darkblue">
<div ng-app>
<p>
<h3>Enter a numberic value</h3>
<input type="text" ng-model="number_val"/>
</p>
<br/><br/>
Data in number format: {{number_val|number:2}}
</div>
</body>
</html>
